Context 도입을 통한 Re-render 범위 축소 및 렌더링 횟수 75% 감소

Context

Prop Drilling 구조에서 데이터 전달 경로 상의 모든 중간 컴포넌트가 불필요하게 재렌더링되는 성능 저하 발생. React.memo를 적용하더라도 Props 변경으로 인해 렌더링 전파를 막지 못하는 구조적 한계 존재.

Technical Solution

• Context API를 통한 데이터 전달 경로의 추상화 및 중간 컴포넌트 Props 의존성 제거
• React.memo와 Context Consumer 조합을 통한 Intermediate Components의 렌더링 스킵 구현
• Provider Value 변경 시 Consumer 컴포넌트로 직접 연결되는 React의 내부 렌더링 메커니즘 활용
• 데이터 변경 빈도에 따른 Context 분리를 통해 불필요한 전체 리렌더링 방지
• Provider Value에 useMemo를 적용하여 부모 렌더링 시 발생하는 참조 무결성 파괴 방지
• 부분적 상태 업데이트가 필요한 경우 Selector 기반 Store 도입을 통한 최적화 설계