Context API 란?

context api는 redux 와 마찬가지로 상태의 중앙 관리를 위한 상태 도구 이다.
react에서만 사용할 수 있고, 여러 저장소를 만들 수 있다.

일일히 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

일반적인 리액트 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달되지만,
애플리케이션 안에 여러 컴포넌트들에게 전해줘야하는 props의 경우에는 이 과정이 번거로울 수 있어, context를 이용하면, 트리 단계마다 props를 넘겨주지 않아도 많은 컴포넌트가 값을 공유 할 수 있다.

언제 context를 써야할까

리액트 컴포넌트 트리안에서 전역 데이터를 각 컴포넌트에 공유가 필요할때 써야한다.

예) 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨줌

context 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} />;
  }
}

context api 사용 후

// 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} />;
  }
}

context를 사용하기 전에 고려할 것

context의 주된 용도는 다양한 레벨에 네스팅(드릴링이 많은)된 많은 컴포넌트에게 데이터를 전달하는 것이다.
대신 context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다.

🤔 회사에서 context api 를 도입한 이유?

회사에선 초창기때부터 리액트 공식문서 기준으로 리액트 개발이 진행된 것 같다.
팀장님도 리액트 공식문서를 강조하셨기도 하고, context api 리액트에서 자체에서 지원하던 상태관리 도구이다보니
다른 라이브러리 사용보단 context api를 먼저 채택하신게 아닌가 싶었다.

🤔 근데 왜 갑자기 context api 사용을 멈췄을까?

회사의 프론트엔드 트렌드는 마이크로 프론트엔드 기술에 초점이 맞춰져 있었다.
모듈화를 중요시 여겼고, 컴포넌트 재활용, 서비스 컴포넌트 분리라는 것들이 중요해지기 시작해지기 시작했다.
위에 정리해둔 고려할 점과 관련해서 context를 사용시에 컴포넌트 재사용이 어려워지기 때문에
이와 같은 이유로 context api 사용을 멈추게 된 것으로 인지하고 있다.

참고자료 리액트 공식문서