Context는 props 없이 트리 깊숙이 데이터를 전달하는 React 내장 API입니다.

📘 기본 패턴

const ThemeContext = createContext<'light' | 'dark'>('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Page />
    </ThemeContext.Provider>
  );
}

function Page() {
  const theme = useContext(ThemeContext);
}

✅ 적합한 데이터

• theme, locale, auth session
• 자주 안 바뀌는 전역 설정
• prop drilling이 깊지만 updates가 드문 경우

⚡ 성능

• Provider value 변경 → 해당 context 구독 모든 consumer 리렌더
• 해결: context 분리 (state vs dispatch), memo, selector library (Zustand, Jotai)

🔀 대안

🔗 참고 자료

• Passing Data Deeply with Context — Context로 prop drilling을 줄이는 방법을 설명한다.
• useContext — Context 값을 읽는 Hook이다.
• createContext — Context 객체를 만드는 API다.