React 기초 09 · Custom Hook

커스텀 훅 - 로직을 도시락처럼 싸기

반복되는 state+effect 로직을 use 함수로 싸서 어디서나 꺼내 쓰기. 같은 훅을 써도 상태는 각자 따로 가져요.

먼저 비유로

로직을 도시락처럼 싸요

여러 컴포넌트에서 똑같은 코드(state + 그걸 바꾸는 함수들)를 자꾸 복사하게 될 때가 있어요. 이걸 use로 시작하는 함수 하나에 싸두면, 필요한 곳에서 도시락 꺼내듯 한 줄로 꺼내 써요. 이게 커스텀 훅이에요. 사실 useState/useEffect도 이렇게 만들어진 훅이고, 우리도 그 위에 우리만의 훅을 얹는 거예요.

중요한 건, 같은 도시락(훅)을 여러 명이 받아도 각자 자기 도시락을 먹는다는 거예요. 로직은 공유하지만 값은 따로따로예요.

직접 해보기

같은 훅, 따로 노는 두 카운터

두 카드 모두 useCounter라는 같은 훅을 써요. 그런데 A를 올려도 B는 그대로죠? 훅을 부를 때마다 자기만의 state가 새로 생기기 때문이에요.

직접 만져보세요

카운터 A0

카운터 B10

둘 다 같은 useCounter를 쓰지만, A를 올려도 B는 안 움직여요. 훅은 로직(방법)만 나눠 쓰고, 값(state)은 부를 때마다 새로 생기기 때문이에요.

A를 올려도 B는 안 움직이는 걸 확인하세요. (상태는 각자)

핵심은 이거예요

커스텀 훅은 로직을 재사용하게 해줘요. 단, 상태는 공유되지 않아요 - 부르는 곳마다 자기만의 state가 새로 생겨요.

흐름으로 보기

커스텀 훅 만드는 순서

1반복되는 state/effect 로직을 발견해요 (예: 카운터, 창 크기 감지).
2use로 시작하는 함수로 옮기고, 그 안에서 useState/useEffect를 써요.
3바깥에서 쓸 것만 return으로 돌려줘요 (값, 조작 함수 등).
4여러 컴포넌트에서 그 훅을 호출하면, 각자 독립된 상태로 동작해요.

코드로 보기

딱 이만큼이에요

// 커스텀 훅 = state/effect 로직을 use 함수로 싼 것 (이름은 꼭 use로 시작)function useCounter(start = 0) {  const [count, setCount] = useState(start);  const inc = () => setCount((c) => c + 1);  const reset = () => setCount(start);  return { count, inc, reset }; // 필요한 것만 골라 돌려줌} // 쓰는 쪽은 한 줄. 부를 때마다 자기만의 count가 생긴다.function Card() {  const { count, inc, reset } = useCounter(0);  return <button onClick={inc}>{count}</button>;}

로직은 useCounter 안에, 쓰는 쪽은 한 줄. 상태는 각자.

조심하세요

처음에 꼭 헷갈리는 것

이름을 use로 시작 안 하기. 훅 규칙상 이름이 use로 시작해야 React가 훅으로 인식하고 검사해줘요.
조건문/반복문 안에서 훅 부르기. 훅은 컴포넌트(또는 다른 훅)의 맨 위에서 항상 같은 순서로 불러야 해요. if 안에서 부르면 깨져요.
상태가 공유될 거라 기대하기. 값을 여럿이 같이 쓰려면 훅이 아니라 Context나 상위 state로 끌어올려야 해요.

한 걸음 더

실제로 쓰는 커스텀 훅 27종 구경하기 →

useDebounce, useClickOutside, useSwipe... 쇼케이스의 훅(Hook) 카테고리에 바로 만져볼 수 있는 훅 데모가 모여 있어요.