Context 경계

Context Provider 경계

Context API는 prop drilling을 줄이지만 value 참조가 바뀔 때 구독 컴포넌트가 넓게 다시 렌더링되는 fan-out 비용을 관리해야 합니다.

01

Provider 배치

상태가 필요한 하위 트리만 감싸도록 Provider 범위를 좁힙니다.

경계
02

Value 구성

객체나 함수 value는 매 렌더 새 참조가 되지 않도록 구조를 분리합니다.

identity
03

Consumer 구독

useContext를 호출한 컴포넌트는 value 변경 시 다시 렌더링됩니다.

subscription
04

Context 분리

자주 바뀌는 값과 거의 바뀌지 않는 설정을 다른 Context로 나눕니다.

split
05

대안 검토

빈번한 상태 업데이트는 external store나 상태관리 라이브러리가 더 나을 수 있습니다.

alternative
Theme
낮은 빈도의 전역 설정 드물게 바뀌고 많은 컴포넌트가 읽는 값은 Context에 잘 맞습니다.
적합
Auth
사용자 세션 범위 사용자 정보와 권한은 Provider 범위를 앱 구조와 맞춰 잡아야 합니다.
갱신 경로 확인
Form Field
빈번한 입력 상태 입력마다 전체 subtree가 흔들릴 수 있어 Context 단독으로는 위험합니다.
분리 필요

Context 성능 기준

Provider 남용 앱 전체를 큰 객체 value 하나로 감싸면 변경 영향이 과하게 퍼집니다.
참조 안정성 value에 inline 객체와 함수를 넣으면 매 렌더 다른 값으로 보일 수 있습니다.
구독 범위 작은 값 하나만 필요한 컴포넌트가 큰 context 전체를 구독하지 않게 합니다.