[React] 15. 커스텀 Hook 만들기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

커스텀 Hook

• 반복되는 로직을 Hook으로 만들어 함수형 컴포넌트에서 손쉬운 재사용이 가능하도록 만드는 것이다.
• 원하는 로직을 다양한 Hooks를 통해 구현하고, 원하는 값을 반환하도록 함수를 작성하면 된다.

커스텀 Hooks 생성 & 사용

1. src 디렉토리 내부에 hooks 디렉터리를 만들어준다.
   (필수가 아니며, 편의 상 생성해주는 것이다.)

   

2. 해당 디렉토리 내부에 hook이 될 파일을 생성해준다.

   

3. 기호에 따라 함수 로직을 작성하고, 외부에서 사용할 수 있도록 export해준다.

   import { useStatef } from "react";

   // 외부에서 사용할 수 있도록 export 해줌
   export default function useMath(initialNum) {
     const [num, setNum] = useState(initialNum);

     const increase = () => {
       setNum(num + 1);
     };

     const decrease = () => {
       setNum(num - 1);
     };

     const init = () => {
       setNum(initialNum);
     };

     return [num, increase, decrease, init];
   }

4. 외부 함수형 컴포넌트 파일에서 해당 Hook을 불러온다.

   import useMath from "./hooks/useMath";

5. 해당 커스텀 Hook을 사용한다.

   const [num, increase, decrease, init] = useMath(0);
   // 생략
   return(
     <div>
       <div>{num}</div>
       <button onClick={increase}>+1</button>
       <button onClick={decrease}>-1</button>
       <button onClick={init}>초기화</button>
     </div>
   );

References
"21. 커스텀 Hooks 만들기" .velopert