커스텀 Hook 해부: 로직 재사용 시스템

핵심 개념

커스텀 Hook은 use로 시작하는 함수로 로직을 재사용하는 패턴입니다. 여러 컴포넌트에서 동일한 상태 로직을 공유할 수 있습니다. useState, useEffect 등을 조합하여 새로운 Hook을 만듭니다. 커스텀 Hook을 지우며 재사용 로직이 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (36줄)







const { useState, useEffect } = React;

  function useCountdown(initial) {
    const [count, setCount] = useState(initial);
    const [active, setActive] = useState(false);

    useEffect(() => {
      if (!active || count <= 0) return;
      const timer = setTimeout(() => setCount(c => c - 1), 1000);
      return () => clearTimeout(timer);
    }, [active, count]);

    return { count, active, start: () => setActive(true), reset: () => { setCount(initial); setActive(false); } };
  }

  function MissionTimer() {
    const { count, active, start, reset } = useCountdown(10);
    return (
      <div>
        <div style={{color: count > 5 ? '#22c55e' : count > 2 ? '#f59e0b' : '#10b981', fontSize:'32px', marginBottom:'12px'}}>{count}s</div>
        <div style={{display:'flex', gap:'8px'}}>
          <button onClick={start} disabled={active} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>START</button>
          <button onClick={reset} style={{background:'#333', color:'#e8e8e8', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>RESET</button>
        </div>
        {count === 0 && <div style={{color:'#10b981', marginTop:'8px'}}>TERMINATED</div>}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<MissionTimer />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '커스텀 Hook' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'커스텀 Hook'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '커스텀 Hook' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '커스텀 Hook' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

커스텀 Hook 해부: 로직 재사용 시스템은 이 3가지만 확실히 잡으세요

1.같은 상태 관리 패턴을 여러 컴포넌트에 복붙하면 수정할 때 모든 복사본을 찾아야 합니다

2.커스텀 Hook은 use로 시작하는 함수로, 상태와 로직을 캡슐화해서 여러 컴포넌트에서 공유합니다

3.다음 챕터에서 조건에 따라 다른 UI를 보여주는 조건부 렌더링 패턴을 배웁니다

💬 이 챕터 질문 보기

REACT · CH.12 — 질문하거나 답변을 확인하세요

→

진행도 12 / 34

← 커리큘럼으로 ← 목록으로 (React)