Referential Integrity 확보를 통한 React 불필요한 Re-render 제거 및 렌더링 최적화

Context

React의 기본 렌더링 메커니즘으로 인한 컴포넌트 함수 재실행 및 변수/함수 재생성 발생. 특히 부모 컴포넌트의 상태 변경 시 자식 컴포넌트의 Props 변경 여부와 무관하게 발생하는 불필요한 Re-render가 대규모 애플리케이션의 성능 병목으로 작용.

Technical Solution

• Shallow Comparison 기반의 React.memo 적용을 통한 동일 Props 유지 시 컴포넌트 렌더링 스킵 구조 설계
• JavaScript의 참조 무결성 특성에 따른 함수 재생성 문제를 해결하기 위해 useCallback을 통한 Function Reference 고정
• 고비용 연산의 중복 실행을 방지하고자 의존성 배열 기반의 캐싱을 수행하는 useMemo 도입
• React.memo가 정상 작동하기 위한 전제 조건으로 useCallback과 useMemo를 결합하여 Stable Reference를 제공하는 상호 보완적 최적화 전략 수립