[React] 커스텀 Hooks과 다른 Hooks

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

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

// useInputs.jsx
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];
}

그리고 이 Hook을 Info 컴포넌트에서 사용해 보자.
훨씬 깔끔해진 것을 볼 수 있다.

// Info.jsx
import useInputs from './useInputs';
 
const Info = () => {
  const [state, onChange] = useInputs({
    name: '',
    nickname: ''
  });
  const { name, nickname } = state;
 
  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};
 
export default Info;

커스텀 Hooks를 만들어서 사용했던 것처럼, 다른 개발자가 만든 Hooks도 라이브러리로 설치해 사용하는 것도 가능하다.

• https://nikgraf.github.io/react-hooks/
• https://github.com/rehooks/awesome-react-hooks