[Hook] useContext

useContext란?

context 객체에서 반환된 값을 받아 그 context의 현재 값을 반환한다

 

- context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value의 값에 의해 결정된다

-컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 useContext는 그 provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다

-상위컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서 부터 다시 렌더링 된다

 

useContext로 전달되는 인자는 context 객체 그 자체여야 한다

맞는사용 : useContext(MyContext)   /   틀린사용 : useContext(MyContext.Provider) useContext(MyContext.Consumer)

 

 

# useContext 사용 예시

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

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

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

- ThemeContext에 context 객체를 생성하고 themes 객체를 기본값으로 담는다

- App 컴포너트에서 Provider로 하위 컴포넌트에게 value=themes.dark를 넘겨준다

- ThemeContext 하위 컴포넌트인 Toolbar의 하위 컴포넌트인 ThemeButton에서 useContext에 context객체를 넣어주고 JSX구문에 속성값으로 context 객체를 담은 변수를 사용하면된다

---

출처

https://ko.reactjs.org/docs/hooks-reference.html

길벗) 리액트를 다루는 기술