useReducer 해부: 복잡한 상태 관리

핵심 개념

useReducer는 복잡한 상태 로직을 action과 reducer로 관리합니다. dispatch(action)으로 상태 변경을 요청하고 reducer가 새 상태를 반환합니다. Redux 패턴과 유사하며 상태 변경 로직을 한 곳에 모읍니다. reducer를 지우며 상태 관리가 어떻게 붕괴되는지 확인하십시오.

코드 분석

REACT📋 코드 (36줄)







const { useReducer } = React;

  const initialState = { energy: 100, missions: 0, status: 'STANDBY' };

  function reducer(state, action) {
    switch(action.type) {
      case 'DEPLOY': return { ...state, energy: state.energy - 20, missions: state.missions + 1, status: 'ACTIVE' };
      case 'RECHARGE': return { ...state, energy: Math.min(100, state.energy + 30), status: 'CHARGING' };
      case 'TERMINATE': return { ...state, energy: 0, status: 'TERMINATED' };
      default: return state;
    }
  }

  function UnitControl() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <div>
        <div style={{color:'#10b981', marginBottom:'4px'}}>ENERGY: {state.energy}%</div>
        <div style={{color:'#888', marginBottom:'4px', fontSize:'12px'}}>MISSIONS: {state.missions}</div>
        <div style={{color:'#f59e0b', marginBottom:'12px', fontSize:'12px'}}>STATUS: {state.status}</div>
        <div style={{display:'flex', gap:'8px'}}>
          <button onClick={() => dispatch({type:'DEPLOY'})} style={{background:'#10b981', color:'#080808', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>DEPLOY</button>
          <button onClick={() => dispatch({type:'RECHARGE'})} style={{background:'#22c55e', color:'#080808', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>RECHARGE</button>
          <button onClick={() => dispatch({type:'TERMINATE'})} style={{background:'#333', color:'#888', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>TERMINATE</button>
        </div>
      </div>
    );
  }

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

AI 프롬프트

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

Claude

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

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

ChatGPT

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

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

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

useReducer 해부: 복잡한 상태 관리는 이 3가지만 확실히 잡으세요

1.useState가 5개 이상 늘어나면 상태 간 의존성이 복잡해지고, 어떤 setState가 어떤 변화를 일으키는지 추적이 어렵습니다

2.useReducer는 dispatch(action)으로 상태 변경 의도를 명시하고, reducer 함수가 현재 상태와 action을 받아 다음 상태를 결정합니다

3.다음 챕터에서 클래스 컴포넌트 시절의 생명주기 개념과 Hook과의 대응 관계를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 17 / 34

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