문제
4개 Context Provider 모두 value 객체를 인라인으로 생성하고 있어, 관련 state가 변경될 때마다 새 참조의 객체가 생성됩니다.
React는 Context value의 참조 동등성(reference equality)으로 리렌더 여부를 판단하므로, 값이 실질적으로 바뀌지 않아도 해당 Context를 구독하는 모든 컴포넌트가 리렌더되는 문제가 있습니다.
영향받는 파일
| 파일 |
구독 컴포넌트 |
src/contexts/AuthContext.tsx |
ProtectedRoute, 모든 (main)페이지 |
src/contexts/LayoutContext.tsx |
BottomNav, NavigationGuardModal |
src/contexts/ToastContext.tsx |
토스트를 사용하는 모든 컴포넌트 |
src/contexts/AnalysisContext.tsx |
홈 페이지, AuthContext |