08. Custom Hook

반복되는 Hook 들을 커스텀 된 훅으로 묶어서 사용하는 방식

• 반복되는 로직을 재사용이 쉽도록 만들어서 사용하며, 커스텀 Hook을 만들 때에는 use라는 단어를 앞에 두어서 만들어준다.

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  // change
  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;

< 출처 : 21. 커스텀 Hooks 만들기 · GitBook>

위와 같이 일련의 과정들을 하나의 Hook 함수로 만들어서 사용하면 된다.

이 커스텀 Hook은 많이 만들어보고 공통적인 과정을 하나의 함수로 바꾸는 연습을 해봐야할 것 같다.