📌Custom hooks

• React 16.8에서 도입된 기능
• 개발자가 필요한 로직을 정리하고 뽑아내서 사용하기 위해 커스텀 한 훅
• 목적 : 같은 로직을 여러 컴포넌트 간에 공유

---

Custom hooks 만들기

1. src하위 hooks 폴더 생성
2. 커스텀 훅 파일 생성(use~)
   *확장자 : js, ts, jsx, tsx 상관 없음
   보통 js or ts로 만들라던데 자신이 어떻게 활용하기 나름
3. 내부에서 useState, useEffect 등의 Hook을 사용하여 상태와 로직을 관리
   => 상태 값과 함수들을 반환
   => 재사용 : 필요한 컴포넌트에서 커스텀 훅을 호출하여 로직을 공유

예시

1. 폴더 및 파일 생성

// src/hooks/useCounter.js

import React, { useState } from 'react';

function useCounter(initialCount = 0) {
  const [count, setCount] = useState(initialCount);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

export default useCounter

2. 필요 컴포넌트에서 커스텀 훅 호출 후 사용

import useCounter from "@/src/hooks/useCounter.js"

function Counter() {
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

export default Counter;

---

참고
공식문서