ContextAPI 알아보기

📘 React공식문서 참고

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

• context의 주 용도: 다양한 레벨의 중첩된 많은 컴포넌트에 데이터를 전달하기 위함
• 주의할 점 : 재사용이 어려워지므로 꼭 필요할 때만 사용해야 한다.

만약, prop을 넘기는 것을 줄이고 싶은 이유라면 Component Composition (컴포넌트 합성의 방법도 있다) 방법도 있다. prop 대신에 컴포넌트를 전달하는 것이다. 여러개의 컴포넌트를 넘길 수 있다.

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

단순한 전달이 아닌,
동일한 데이터를 여러 레벨의 컴포넌트에 알려야할 필요가 있을 땐 context를 쓰는 것이 좋다. 예를 들면 로그인 정보, 테마, 데이터 캐시 등을 관리할 때 이다.

---

API

React.createContext

const MyContext = React.createContext(defaultValue)
전역 데이터를 담을 객체를 생성한다.
defaultValue는 적절한 Provider 짝을 찾지 못할 때 사용되는 value

Context.Provider

<MyContext.Provider value={//전달하는 데이터}>
Provider는 context를 구독하는 컴포넌트(consumer)에 context의 변화를 알리는 역할을 한다. value가 변경될 때마다 Provider하위에서 context를 구독하는 컴포넌트들을 다시 렌더링 시킨다.

Context.Consumer

<MyContext.Consumer>
  {value=><div>name: {value}</div>}
</MyContext.Consumer>

context의 변화를 구독하는 컴포넌트이며 context의 값을 받아 React Node를 반환한다. value 매개변수는 Provider 중 상위트리에서 가장 가까운 Provider의 prop과 동일하다. 만일, 상위에 Provider가 존재하지 않다면 context객체를 생성할 때 지정한 defaultValue와 동일할 것이다.

Provider와 Consumer를 중첩하여 작성해 여러 context를 구독할 수 있다.

// 기본값이 light인  ThemeContext
const ThemeContext = React.createContext('light');

// 로그인한 유저 정보를 담는 UserContext
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // context 초기값을 제공하는 App 컴포넌트
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// 여러 context의 값을 받는 컴포넌트
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

ContextAPI와 최적화

Consumer로 감싸버린 공간 내에서는 value를 모두 사용할 수 있는데, 단점으로는 전역데이터를 사용하지 않는 컴포넌트에서도 렌더링이 발생한다.
때문에 Consumer로는 정말 데이터를 필요로 하는 컴포넌트만 감싸도록 해야한다.

또한, Provider에서 전역상태로 넘길 prop을 직접 선언해 새 객체로 인식하지 않도록 해야한다. 새로운 객체로 인식하면 Provider가 렌더링 될 때 하위의 구독하는 모든 컴포넌트들이 렌더링되는 문제가 발생하기 때문이다.

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

{{something: 'something'}}새로운 객체로 보고 Toolbar를 항상 렌더링 시키게 된다. 이를 막기 위해 객체의 값을 부모의 state로 끌어올려 관리해야한다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'}, //state에 선언!
    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.value}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

Hook을 사용한 useContext

Consumer를 사용하는 다른 방법이다. 컴포넌트들을 감쌀 필요없이,
전역상태를 사용할 곳에서 const globalState = useContext(SampleContext)와 같이 선언하면 globalState가 해당 훅이 선언된 컴포넌트에서 가장 가까운 Provider의 상태값을 갖게 된다.

이 때, context값이 변경되면 useContext는 Consumer와 동일하게 호출한 컴포넌트를 리렌더링 시킨다.

useReducer

useState처럼 상태만을 반환하지 않고 이전 state에 의존하여 여러 조건에 대해 새로운 state를 만드는 경우 유용하다. 콜백 대신에 dispatch를 전달할 수 있기 때문에 상태업데이트를 시키는 컴포넌트를 최적화할 수 있다.
(dispatch는 다시 렌더링을 시키지 않는다.)