[React] 커스텀 Hooks 만들기

input 입력을 처리하는 등 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 자신만의 Hook으로 작성하여 로직을 재사용할 수 있습니다. 

만드는 방법은 useEffect, useState 등의 Hook을 사용해서 원하는 기능을 구현하고 , 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됩니다. 

 

input을 관리하는 커스텀 훅을 만들기 위해 useInputs.js 파일을 만들어줍니다.

 

useInputs.js

import { useState, useCallback } from 'react';

function useInputs(initialForm){
    const [form, setForm] = useState(initialForm); // Form이라는 새로운 상태를 선언하게 되는데, 그 상태의 초기값은 initalForm
    const onChange = useCallback(e => {
        const { name, value } = e.target;
        setForm(form => ({ ...form, [name]: value})) // form을 업데이트하는데 name 값을 value로 설정하겠다
    }, []);
    const reset = useCallback(() => setForm(initialForm), [initialForm]);

    return [form, onChange, reset]; //3가지 값들을 반환해줍니다. 
}

export default useInputs

1) 함수해서 관리할 form에 대하여 초기값을 파라미터로 받아옵니다

2) 다음에 Hook이 반환하는 onChange를 사용해서 input의 change 이벤트를 관리합니다. 

이 때, form을 업데이트 할 때는 form을 복사한다음에 name 값을 value로 설정합니다