[react] context API

context API란

React 컴포넌트는 Tree로 구성되어 있습니다. context는 이 Tree 내부에서 global한 data를 공유하여 다룰 수 있도록 도와주는 API입니다.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}
function Toolbar(props) {
  // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서
  // ThemeButton에 전달해야 합니다.
  // 앱 안의 모든 버튼이 테마를 알아야 한다면
  // 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}
class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

위의 코드는 Toolbar 컴포넌트가 props로 theme을 입력받는데, 만약 모든 컴포넌트들이 theme을 props로 전달받아야 한다면 그것은 꽤나 번거로운 일이 될 것입니다.
context를 통해 위 코드를 수정하면

// context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도
// 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다.
// light를 기본값으로 하는 테마 context를 만들어 봅시다.
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    // Provider를 이용해 하위 트리에 테마 값을 보내줍니다.
    // 아무리 깊숙히 있어도, 모든 컴포넌트가 이 값을 읽을 수 있습니다.
    // 아래 예시에서는 dark를 현재 선택된 테마 값으로 보내고 있습니다.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
// 이젠 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요가 없습니다.
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
class ThemedButton extends React.Component {
  // 현재 선택된 테마 값을 읽기 위해 contextType을 지정합니다.
  // React는 가장 가까이 있는 테마 Provider를 찾아 그 값을 사용할 것입니다.
  // 이 예시에서 현재 선택된 테마는 dark입니다.
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

이제는 props를 통해 중간의 엘리먼트들에게 데이터를 넘기지 않아도 됩니다!

context를 사용하면..

context는 중간 단계에 많은 엘리먼트들이 존재해 props를 직접 넘기기 부담스러울 때 사용합니다. context를 사용하면 컴포넌트를 재사용하기 어려워집니다.
따라서, 정말 필요할 때만 context를 사용합니다.

도움 : react 공식문서
https://ko.reactjs.org/docs/context.html#when-to-use-context