Custom Hook 만들기

useState, useCallback같은 use로 시작해 import해서 사용하는 라이브러리들을 React Hook이라고 부르는데, 직접 Hook을 만들어볼 수 있음

조건: 파일명 앞에 use가 들어가야 함

예를 들어 useInputs라는 함수를 만들어보겠음

import { useState, useCallback } from "react";

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);

  return [form, onChange, reset];
}

export default useInputs;

initialForm은 해당 useInputs 커스텀 훅을 호출하는 쪽에서 전달해주는 초기값
useState를 이용해 form의 초기값을 initialForm으로 설정해 줌
또한 onChange나 reset같은 함수를 담은 변수도 구현해서 return시에 배열 혹은 객체의 형태로 반환 => 이 부분이 useState에서 [counter, setCounter]처럼 배열 형태로 두 개가 나오는 것과 동일, 혹은 useReducer에서 [number, dispatch]도 동일

import useInputs from "./useInputs";

호출하는 쪽에서는 다음처럼 훅을 불러옴 이미 만들어진 useState같은 hook이 아니기 때문에 react에서 import하는 것이 아닌 것을 명심해야 함

const [form, onChange, reset] = useInputs({
  username: "",
  email: ""
});

배열을 반환했으니, 배열의 형태로 값을 분배해줄 수 있고, useInput에서 넘겨주는 매개변수가 initialForm이 됨