[week9] practice 조시/정유성

[joshuasa0122]

🛠️ 작업 사항

• useReducer 기본 Counter 컴포넌트 구현 (increment / decrement / reset)
• 객체 상태 관리 Form 예제 구현 (payload를 활용한 name · age 필드 업데이트)
• dispatch를 props로 자식 컴포넌트에 전달하는 예제 구현
• useReducer + Context 조합으로 전역 상태 관리 예제 구현 (CounterProvider, useCounter 커스텀 훅)
• 4가지 예제를 한 페이지에 모은 UseReducerPage 구현
• /use-reducer 라우트 등록 및 Navbar에 링크 추가

---

📸 관련 이미지 (스크린샷 또는 동영상)

2026-05-24.4.51.02.mov

---

💬 기타 설명

💡 useReducer의 4가지 핵심 패턴을 단계별로 실습했습니다.

1. 기본 useReducer — switch문으로 increment / decrement / reset 액션 분기
2. 객체 상태 관리 — payload를 포함한 액션으로 폼 필드를 개별 업데이트
3. dispatch props 전달 — 부모가 state를 가지고 자식에게는 dispatch만 내려보내 불필요한 state 전파 방지
4. useReducer + Context — CounterProvider로 감싸고 useCounter 커스텀 훅을 통해 props drilling 없이 하위 컴포넌트에서 바로 접근

모든 타입은 TypeScript로 명시적으로 정의했으며 (State, Action, FormAction 등), reducer 함수는 컴포넌트 외부에 분리하여 재사용성과 테스트 용이성을 높였습니다.