Context API 최적화

개념 설명

Context value 변경 시 모든 Consumer가 리렌더링되는 문제를 해결하는 최적화 패턴.

핵심 포인트

• Context value 객체는 매번 재생성되면 불필요한 리렌더링 발생
• 연관된 상태끼리 Context 분리로 리렌더링 범위 최소화
• State와 Dispatch를 분리하여 업데이트 함수만 사용하는 컴포넌트 최적화
• useContextSelector 패턴으로 필요한 값만 구독

예시 코드

// Context 분리 패턴
const UserContext = createContext();
const ThemeContext = createContext();