context scope

Context는 전달 문제를 줄이지만 구독 범위를 넓힌다

Provider value가 바뀌면 useContext로 읽는 컴포넌트가 함께 반응하므로, 전역에 둘 값과 가까이 둘 값을 나누어야 합니다.

Create

Create

createContext는 Provider가 없을 때의 기본값과 Context 객체를 준비합니다.

Provide

Provide

Provider value에는 하위 트리에서 공유할 실제 값을 넣습니다.

Consume

Consume

useContext는 가장 가까운 Provider의 현재 값을 읽고 변경을 구독합니다.

Split

Split

자주 바뀌는 값과 거의 고정된 값은 Context를 나누는 편이 좋습니다.

넣기 좋은 값 테마, 인증 사용자, 언어처럼 넓게 쓰이고 의미가 안정적인 값입니다.
분리할 값 입력 중인 폼 값이나 초당 바뀌는 데이터처럼 변경 빈도가 높은 값입니다.
검증 기준 Provider 위치와 value 객체 메모이제이션이 불필요한 렌더를 만들지 않는지 봅니다.

Context 선택의 기준은 프롭스 전달을 줄였는지가 아니라 공유 범위와 변경 빈도가 맞는지입니다.