Provider Scope

Context는 넓게 쓰는 값보다 함께 읽는 값에 맞춘다

테마, 인증, 언어처럼 여러 컴포넌트가 같은 기준으로 읽는 값은 Context에 어울리지만, 자주 바뀌는 입력값은 범위를 좁히는 편이 안정적입니다.

공유 후보

여러 깊이에서 같은 값을 읽는다

헤더, 콘텐츠, 푸터가 모두 같은 테마를 읽는다면 props 전달보다 Provider가 자연스럽습니다.

지역 상태

한 화면 안에서만 빠르게 변한다

검색어, hover, 열림 상태처럼 변경 빈도가 높은 값은 가까운 컴포넌트에 두는 편이 좋습니다.

Provider 분리

관심사가 다르면 Context도 나눈다

인증 변경 때문에 테마 소비 컴포넌트까지 다시 렌더링되지 않도록 값의 책임을 분리합니다.

value 객체

새 객체는 구독 컴포넌트를 깨운다

`value={{ theme, toggleTheme }}`처럼 객체를 줄 때는 변경 범위와 함수 안정성을 함께 살핍니다.

기본값

Provider 밖에서 읽을 때의 의미를 정한다

`createContext`의 기본값은 테스트와 누락 상황에서 어떤 값을 반환할지 보여주는 문서 역할도 합니다.

트리 범위

필요한 하위 트리만 감싼다

앱 전체 Provider가 항상 정답은 아니며, 기능 영역별 Provider가 더 작고 예측 가능할 수 있습니다.

공유값테마, 인증
Provider범위 지정
구독useContext
분리렌더 절약

읽는 포인트 Context는 전역 변수처럼 모든 값을 넣는 장소가 아니라, 같은 기준을 함께 읽는 컴포넌트 묶음에 값을 공급하는 통로입니다.