custom Hooks

중복된 코드를 없애는 방법이 없을까.

지저분한 코드가 아닌 깔끔한 코드를 짜고 싶다 하면 custom할 수 있습니다.

자신만에 리액트 훅을 만드는 것이 custom Hooks입니다.

규칙

-Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다.
-대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치시킵니다.
-Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 합니다. 즉 return 하는 값은 조건부여서는 안 됩니다.

custom Hooks만들기

export function useInput(initialValue) {
  const [inputValue, setInputValue] = usestate(initialValue);
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };
  
  return [inputValue, handleChange];
  
}