[React]Hook: customHook

 

Custom Hook이란?

사용자가 중복되는 로직을 하나로 묶어 언제든 재사용할 수 있게 만든 hook이다.

주로 자주 사용되는 input이나 fetch의 로직에 활용되기도 한다.

 

- 사용 시 use를 앞에 적어준다.

- return값으로는 배열 또는 오브젝트가 들어와야한다. (배열또는 객체의 수는 추가가 가능하다.)

 

예시

아래와 같은 input로직을 커스텀 훅으로 바꿔준다면.. 

App.js

...
	
   const [inputs, setInputs] = useState({
      username:'',
      email: '',
  })

  const {username, email} = inputs;

  const onChange = (e) => {
      const {name, value} = e.target;
      setInputs({
        ...inputs,
        [name]: value
      });
  };
  
  ...

⬇️

커스텀훅 생성

useInput.js

export function useInput(initialValue) {
  const [values, setValues] = useState(initialValue);
  const onChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };
  return [values, setValues, onChange];
}

 

사용 후 App.js

 const [inputs, setInputs, onChange] = useInput({
    username: "",
    email: "",
  });

  const { username, email } = inputs;

훨씬 간결해지고 사용하기 편리해졌다.