context tree

Context는 Provider 아래 consumer에게 값을 전달한다

Provider value가 바뀌면 그 값을 읽는 consumer가 다시 렌더된다. 그래서 Provider 범위와 value 안정성이 중요하다.

ThemeProvider value를 제공하는 경계
Layout 중간 컴포넌트는 props 전달 불필요
Toolbar 트리 아래 계속 이동
Button consumer useContext로 값 읽기
설계
좋은 기준
나쁜 신호
Provider 범위
필요한 하위 트리만
앱 전체 남발
value
작고 안정적
매 렌더 객체 생성
consumer
함께 읽는 값
관계없는 값 혼합
대안
props/state/store
Context 만능화
핵심 Context는 props drilling을 줄이지만 value 변경 범위까지 함께 설계해야 한다.