useReducer - 복잡한 상태 관리
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. useReducer 훅의 올바른 사용 방법은?
💡 useReducer는 useReducer(reducer, initialState) 형태로 사용하며 [state, dispatch] 배열을 반환합니다. state는 현재 상태값이고 dispatch는 action을 reducer에 전달하는 함수입니다.
Q2. reducer 함수가 반드시 지켜야 할 규칙은?
💡 reducer는 반드시 순수 함수여야 합니다. 즉, (1) 동일한 입력에 항상 동일한 출력을 반환하고, (2) 원본 state를 직접 수정(mutation)하지 않으며 새 객체를 반환하고, (3) API 호출 등 사이드이펙트가 없어야 합니다.
Q3. action 객체의 올바른 구조는?
💡 action 객체는 관례적으로 { type: "액션종류", payload: 추가데이터 } 구조를 사용합니다. type은 필수이며 문자열로 어떤 액션인지 식별합니다. payload는 선택적으로 추가 데이터를 전달할 때 사용합니다.
Q4. useState 대신 useReducer를 사용하는 것이 적합한 경우는?
💡 useReducer는 (1) 다음 상태가 이전 상태에 복잡하게 의존하거나, (2) 여러 서브 값이 있는 복잡한 상태 객체이거나, (3) 여러 컴포넌트/액션이 동일한 상태를 다른 방식으로 업데이트할 때 특히 유용합니다. 단순한 상태는 useState가 더 간결합니다.
Q5. useReducer와 Context API를 함께 사용하는 주요 목적은?
💡 useReducer + Context API 조합은 Redux와 유사한 패턴을 만듭니다. useReducer로 복잡한 상태 로직을 reducer에 중앙화하고, Context.Provider의 value에 state와 dispatch를 넣어 제공하면, 어떤 깊이의 자식 컴포넌트도 props 없이 상태를 읽고 dispatch로 업데이트할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.