[React]Custom hooks

컴포넌트를 만들다보면 반복되는 로직이 자주 발생한다.

커스텀훅을 사용하면 코드와 로직의 반복을 최소화 하고 재사용을 높힐 수 있다 즉 중복되는 로직을 하나의 로직으로 묶어 어느곳 에서든 쉽게 import  하여 사용할 수 있게 해준다. 

 

 

내 프로젝트에 커스텀훅을 적용해 보고자 한다.

이처럼 두개의 컴포넌트는 비슷한 코드(input)가 반복이 되고있다.

 

useInputs hooks을 만들어준다.

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);

  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  

  return [form, onChange];
}

export default useInputs;

useInputs hooks을 원하는 곳에서 사용해 보자.

import useInputs from './hooks/useInputs

function Signin() {
  const [form, onChange, reset] = useInputs({
    username: '',
    email: ''
  });
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
    </>
  );
}

export default App;

이렇게 커스텀 Hook 을 만들어서 사용하면 컴포넌트의 로직을 분리시켜서 필요 할 때 쉽게 재사용 할 수도 있다