[React] Context를 사용해야 하는 이유와 사례 ( vs props)

react앱에서 데이터는 위에서 아래로 props을 통해 전달되지만 여러 컴포넌트들에 전해줘야 하는 props의 경우에는 context를 이용하면 트리 단계마다 명시적으로 props을 넘겨주지 않아도 많은 컴포넌트가 값을 공유할 수 있다.

global 변수로서 context를 사용하는 경우는 로그인한 유저, 테마, 선호하는 언어 등이 있을 수 있다. 코드는 아래와 같다.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

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

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

위와 같이 props으로 넘기는게 아니라 아래와 같이 context를 사용하면 자식에 props을 넘길 필요가 없음

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

class App extends React.Component {
  render() { 
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

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

class ThemedButton extends React.Component { 
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할때만 사용해야 한다.