context

하위 컴포넌트로 매번 props 를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터 제공

 

언제 context를 써야 하나

context는 전역적으로 데이터를 공유해야 할 때,

• 현재 로그인한 유저 정보
• 테마
• 선호하는 언어

1. Context 객체를 만듬. 

import { createContext } from 'react';

const ThemeContext = createContext('light');


2. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 
React는 트리 상위에서 가장 가까이 있는 Provider로부터 
현재값을 읽어옴. provider는 context의 값을 읽어오고 변화를 알리는 역할.
provider를 최상단 컴포넌트에서 제공. 

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

3. 하위 컴포넌트에서 사용

데이터를 사용하는 하위컴포넌트에서 useContext를 사용하여 
데이터를 가져와서 사용.


function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}