React 11. Context

When to use Context

Context는 데이터는 제공하는 방법이다. 리액트 컴포넌트에서 데이터를 전달하기 위해서는 사용하고자 하는 데이터가 필요한 컴포넌트를 먼저 구분하고, 그 컴포넌트들의 공통 부모가 되는 컴포넌트를 찾아 그곳에서 useState를 통해 데이터를 관리하고, 필요한 컴포넌트까지 각 단계의 컴포넌트들에게 props를 통해 전달해서 사용했다. 상당히 복잡하고 귀찮은 일이다. 이 귀찮은 일을 간단하게 처리하기 위해 사용하는 것이 Context다.

Context는 “Global” 하게 데이터를 관리할 수 있다. 따라서, 어떤 컴포넌트에서나 필요할 수 있는 유저 인증정보와 같은 것들을 관리하기 좋다.

Context 사용 시 고려할 사항

이거 참 편하네라고 생각하고 막쓰려던 참이였는데, 조심해서 쓰란다. 리액트 공식 홈페이지에 보면 Context를 사용할 때 첫번째 고려사항은 해당 데이터가 필요한 많은 컴포넌트들이 복잡하게 얽혀있는가? 이다. 하지만, Context 사용은 컴포넌트 재사용을 힘들게 하기 때문에 최대한 자제해야 한다고 말한다. 때때로 Context 사용보다 Component Composition이 더 간단한 방법일 때가 있다고 한다.

Context 관련 API 정리

React.createContext

    const MyContext = React.createContext(defaultValue);

Context 객체를 만든다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 가장 가까이 있는 Provider로 부터 값을 읽는다. defaultValue는 컴포넌트 트리에서 적절한 Provider를 찾지 못했을 경우 쓰이는 값이다. 이 값은 컴포넌트를 독립적으로 테스트할 때 유용한 값이다.

Context.Provider

    <MyContext.Provider value={}>

Provider는 Context 오브젝트에 포함된 React 컴포넌트이며, Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알려준다. 즉, Provider를 구독하는 모든 검포넌트들은 context의 변화가 생기면 리렌더링 된다. Provider 컴포넌트는 value prop을 받아서 하위 컴포넌트에 전달하며, 값을 전달받는 하위 컴포넌트의 수는 제한이 없다. Provider 하위에 또 다른 Provider를 배치하는 것이 가능하며, 이 경우 하위 Provider 값이 우선된다.

Class.contextType

   class MyClass extends React.Component {
       static contextType = MyContext;
       render() {
           let value = this.context;
       }
   } 

class의 contextType에 Context 객체를 할당하고, this.context로 Context Value를 참조할 수 있다.

Context.Consumer

    <MyContext.Consumer>
        {value => ()}
    </MyContext.Consumer>

Consumer는 context 변화를 구독하는 컴포넌트이다. Context.Consumer의 자식은 함수여야 한다. 이 함수는 context의 현재값을 받고 React 노드를 반환한다.

useContext

    const value = useContext(MyContext);

useContext는 context객체를 받아 그 context의 현재 값을 반환한다. 이 때 context 현재 값은 트리 안에서 Hook을 호출하는 컴포넌트에 가장 가까이 있는 Provider에 의해 결정된다.