그래서 Context랑 Provider랑 Fiber가 무슨 상관인데

➤ Provider = Context에 실제 “값을 채우고 전달하는 공급자”

Context 자체는 “형식만 있음”.
Provider가 있어야 실제 값이 들어감.

즉,

Context = 타입/구조 정의(창고 설계)
Provider = 실제 값 공급 + 연결(창고 문 여는 지점)
Consumer/useContext = 값 꺼내서 사용(물건 꺼내쓰기)

➤ Context는 “전역 객체”가 아님

React 내부에서 Fiber 트리를 따라 특정 Provider에서 받은 value를 전파하는 구조임.

그래서 Provider를 여러 개 두면:

<ThemeContext.Provider value="dark">
  <ThemeContext.Provider value="light">
     <Component />
  </ThemeContext.Provider>
</ThemeContext.Provider>

RootFiber
 └─ ProviderFiber(value="dark")   ← ThemeContext.Provider #1
      └─ ProviderFiber(value="light")  ← ThemeContext.Provider #2
           └─ ComponentFiber          ← Component

 

ComponentFiber는 “상위(ancestor)로 계속 올라가며 Provider를 찾음”.

 

useContext(Context) 는 자기 바로 위에 있는 가장 가까운 Provider를 찾는다.
(“가장 가까운 조상 Provider”)

 

Component는 가장 가까운 Provider인 “light”를 받음.

➡️ React는 단순한 global variable을 쓰는 게 아니라
트리에서 가장 가까운 Provider로 바인딩하는 아주 깔끔한 시스템임.