8.7 커스텀 Hooks 만들기

    여러 컴포넌트에서 비슷한 기능을 공유할 경우, 이를 여러분만의 Hook으로 작성하여 로직을 재사용할 수 있습니다.

    기존에 Info 컴포넌트에서 여러 개의 인풋을 관리하기 위해 useReducer로 작성했던 로직을 useInputs라는 Hook으로 따로 분리해 보겠습니다.

    src 디렉터리에 useInputs.js 파일을 만들고 다음 코드를 작성해 보세요.

    useInputs.js

    import { useReducer } from 'react';
     
    function reducer(state, action) {
      return {
        ...state,
        [action.name]: action.value
      };
    }
     
    export default function useInputs(initialForm) {
      const [state, dispatch] = useReducer(reducer, initialForm);
      const onChange = e => {
        dispatch(e.target);
      };
      return [state, onChange];
    }

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.