커스텀 훅 — 내가 만드는 나만의 훅

여러 컴포넌트를 만들다 보면 똑같은 상태 로직이 자꾸 반복돼요. 예를 들어 입력값 관리(값 담을 state + onChange), 데이터 페칭(로딩·에러·데이터 상태), 창 크기 감지(resize 이벤트 등록/해제) 같은 것들이죠. 이걸 컴포넌트마다 복사·붙여넣기 하면 관리가 지옥이 됩니다.

커스텀 훅을 만드는 방법은 놀라울 만큼 단순해요. 이름이 use로 시작하는 함수를 하나 만들고, 그 안에서 useState·useEffect 같은 기본 훅을 사용한 뒤, 컴포넌트가 필요로 하는 값을 return하면 됩니다.

// useCounter.js — 카운터 로직을 담은 커스텀 훅
import { useState } from 'react';

function useCounter(초기값) {
  const [count, setCount] = useState(초기값);

  const inc = () => setCount(c => c + 1);   // 1 증가
  const dec = () => setCount(c => c - 1);   // 1 감소
  const reset = () => setCount(초기값);      // 초기값으로

  // 컴포넌트가 쓸 값들을 객체로 묶어 반환
  return { count, inc, dec, reset };
}

export default useCounter;

만든 커스텀 훅은 일반 함수 호출처럼 컴포넌트 안에서 부르면 돼요. 반환된 값을 구조 분해로 받아 쓰면 깔끔합니다.

import useCounter from './useCounter';

function Counter() {
  // 한 줄로 카운터 로직을 그대로 가져옴
  const { count, inc, dec, reset } = useCounter(0);

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={inc}>+1</button>
      <button onClick={dec}>-1</button>
      <button onClick={reset}>리셋</button>
    </div>
  );
}

커스텀 훅에는 딱 하나 꼭 지켜야 할 이름 규칙이 있어요. 반드시 이름이 use로 시작해야 합니다. 그래야 리액트(와 린트 도구 — 코드 실수를 자동으로 잡아주는 검사기)가 "이건 훅이다"라고 인식하고, 훅 규칙(조건문·반복문 안에서 훅을 쓰지 말 것 등)을 검사해줘요.

function useInput(초기값) {
  const [value, setValue] = useState(초기값);
  const onChange = (e) => setValue(e.target.value);
  return { value, onChange };   // 그대로 input에 펼쳐 쓰기 좋음
}

// 사용: const name = useInput('');
//       <input value={name.value} onChange={name.onChange} />

function useToggle(초기값 = false) {
  const [on, setOn] = useState(초기값);
  const toggle = () => setOn(prev => !prev);   // 현재 값을 뒤집음
  return [on, toggle];   // 배열로 반환 → 이름 자유롭게 받기
}

// 사용: const [열림, 토글] = useToggle();

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);   // url이 바뀌면 다시 가져옴

  return { data, loading, error };
}