Zustand 도입을 통한 Boilerplate 제거 및 Re-render 최적화

Context

React 애플리케이션의 State Management 설계 시 Prop Drilling 해결을 위한 Context API의 높은 Re-render 비용과 Redux의 과도한 Boilerplate가 주요 병목으로 작용함. 특히 상태 변경 시 관련 없는 컴포넌트까지 모두 렌더링되는 구조적 한계로 인해 런타임 성능 저하가 발생함.

Technical Solution

• Selector 기반 상태 구독 메커니즘을 통한 특정 상태 변경 시 해당 컴포넌트만 Re-render 하는 최적화 설계
• Provider Wrapper 제거를 통한 컴포넌트 트리 단순화 및 렌더링 계층 구조 효율화
• Hook-based Store 설계를 통한 Action, Reducer 정의 단계 생략 및 개발 생산성 향상
• 서버 상태 관리는 React Query에 위임하고 클라이언트 UI 상태만 Zustand로 분리하는 관심사 분리 전략 채택
• 복잡한 비동기 로직은 별도의 Middleware 없이 Store 내부에서 직접 처리하는 단순화된 데이터 흐름 구축