렌더링 시간 73% 절감, Zustand 선택적 구독으로 해결한 상태 관리 최적화

Context

Normalized State 구조임에도 특정 카드 업데이트 시 보드 전체 컴포넌트가 재렌더링되는 현상 발생. 불필요한 데이터 전달을 유발하는 Prop Drilling 구조의 한계. React DevTools Profiler 기준 카드 이동 시 렌더링 시간 55ms 기록.

Technical Solution

• React Context 도입을 검토했으나 전체 상태 변경 시 구독 중인 모든 컴포넌트가 재렌더링되는 구조적 특성으로 인해 배제
• 컴포넌트가 필요한 상태 조각만 선택적으로 구독하는 Zustand 라이브러리 도입
• Normalized State 아키텍처를 Zustand Store로 이관하여 데이터 참조 구조 유지
• Selector 함수를 통한 상태 구독 방식으로 변경하여 변경되지 않은 카드의 재렌더링을 완전히 차단
• 부모 컴포넌트의 렌더링 여부와 상관없이 Store에서 데이터를 직접 추출하여 React.memo의 한계를 극복하는 설계

Impact

• 단일 카드 이동 시 렌더링 시간 55ms에서 15ms로 단축
• 기존 대비 렌더링 성능 약 73% 개선

Key Takeaway

빈번하게 업데이트되는 상태는 Context보다 세밀한 구독(Granular Subscriptions)이 가능한 상태 관리 도구를 사용하여 렌더링 범위를 최소화해야 함.