React에서 Context API와 상태관리

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

한계

다시 렌더링 할지 여부를 정할 때 참조를 확인하기 때문에 Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링되는 문제가 발생할 수 있다. 예를 들어 아래의 코드는 value가 바뀔 때 마다 매번 새로운 객체가 생성되므로 Provider가 렌더링 될 때마다 하위에서 구독하고 있는 컴포넌트 모두가 렌더링 된다.

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider
        value={{ something: "something", somthing2: "something2" }}
      >
        <Toolbar />
        <Toolbar2 />
      </MyContext.Provider>
    );
  }
}

즉 Toolbar 에서는 value.something을 Toolbar2에서는 value.something2를 사용한다고 하더라도 value가 갱신될 때 마다 새 객체를 만들어 내므로 실제 사용하는 props와 상관없이 다시 렌더링 된다.

그럼 어떨 때 사용해야 하나

상태관리에 적합하지 않은 것이 한계이므로, 자주 바뀌지 않는 상태를 어플리케이션 전역에서 사용하려 할 때는 유용하다.

예를 들자면 @emotion/react와 같은 라이브러리에서 ThemeProvider를 Context api로 구현해놓았다.

Ref

React 에서 Context API 와 상태관리