19. Custom Hook 만들어보기

# 컴포넌트를 만드는 과정에서 반복되는 로직이 발생하기 마련이다. 이럴 때에는 Custom Hook 을 만들어서 반복되는 로직을 쉽게 재사용한다.

구현하는 방법은 Hook 파일 안에서 useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다.

​

(1) src/hooks 디렉터리를 만들어서 따로 분리해준다.

(2) use 라는 키워드로 시작하는 파일을 만든다. ex) useInputs.js

(3) useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현한다.

​

예시로 useInputs.js 를 구현해보자

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;

위 Custom Hook 을 App.js 에서 아래와 같이 사용할 수 있다.

// App.js
  const [{ username, email }, onChange, reset] = useInputs({
    username: '',
    email: ''
  });
...
  const onCreate = useCallback(() => {
    dispatch({
      type: 'CREATE_USER',
      user: {
        id: nextId.current,
        username,
        email
      }
    });
    reset();
    nextId.current += 1;
  }, [username, email, reset]);

---

출처 : https://react.vlpt.us/basic/21-custom-hook.html

21. 커스텀 Hooks 만들기 · GitBook