Context Flow

Context Provider-Consumer 전달 구조

Context는 중간 컴포넌트를 건너뛰어 공통 값을 하위 트리 전체에 공급한다.

값이 컴포넌트 트리로 퍼지는 방식

shared value

createContext

공유할 값의 통로와 기본값을 만든다.

Provider

트리 상단에서 value를 공급한다.

Nested Tree

중간 컴포넌트는 props를 전달하지 않아도 된다.

useContext

하위 컴포넌트가 가장 가까운 Provider 값을 읽는다.

Update

value가 바뀌면 소비 컴포넌트가 새 값으로 갱신된다.

Split Context

자주 바뀌는 값은 분리해 불필요한 렌더를 줄인다.

Context 생성Provider 공급하위 소비변경 전파
읽는 법

Context는 전역 저장소가 아니라 트리 범위 공유 통로다. 값 변경 빈도가 높으면 범위를 좁히는 것이 좋다.