Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

이전에는 부모(상위) 컴포넌트에서 자식(하위) 컴포넌트에게 값을 전달하기 위해서 props 를 이용하여 전달 했습니다.

props 를 이용하면 해당 props 가 필요 없는 컴포넌트에서 값을 받고 다시 자신의 하위 컴포넌트로 전달해야 했습니다. 이러한 과정에서 부모 컴포넌트와 자식 컴포넌트느 자신이 필요하지 않은 props 를 전달 해야했습니다.

Context 는 위의 경우 처럼 값을 전달 하는 방법이 아닌 상위 컴포넌트에서 값을 저장, 관리하고 값을 사용하는 하위의 컴포넌트에서 Context 의 값을 사용합니다.

-----1

Context 사용시 컴포넌트의 재사용이 어렵기 때문에 React에서는 Context 의 주요 용도는 많은 컴포넌트들이 중첩된 구조를 가지고 있을 때 사용하라고 제시합니다.

또한 props 가 많은 컴포넌트들을 통해 전달 된다면 Context 를 사용하는 것보다 컴포넌트 합성(component composition) 이 간단한 해결책일 수도 있다고 이야기 합니다.

Context 사용하기

React.createContext

Context 를 사용하기 위해서는 먼저 React.createContext 를 통해 Context 를 생성해야 합니다.

const FirstContext = React.createContext(defaultValue)

Context 를 생성할 때 DefaultValue 를 통해 생성하며 이 때 DefaultValue 는 이 후 설명하게 될 Context.Provider 에서 설정되지 않은 값의 기본 값을 설정 합니다.

Context.Provider

Context.Provider 는 자식(하위) 컴포넌트에게 값을 전달합니다.

<FirstContext.Provider value = {
    hello:"Hello",
    hi:"Hi"
  } />

value 의 값이 Context.Consumer 하는 자식 컴포넌트에게 전달이 되며 중첩된 Context.Provider 구조를 갖을 수 있으며 중첩된 구조의 경우 가장 근접한 ProviderConsumer 하게 됩니다.
Providervalue 또한 stateprops 처럼 변화에 따라 Consumer 하는 하위 컴포넌트들은 ReRendering 하게 됩니다.

Context.Consumer

부모 컴포넌트의 Context.Providervalue를 가져옵니다.

<FirstContext.Cosumer>
  {(hello, hi)=>(
    <div>
      {hello}{hi}
    </div>
  )}
</FirstContext.Cosumer>

해당 Context.Providervaluenull 또는 undefine일 경우 React.createContext 생성시 defualtValue에 편성했던 값을 가져오는 것이 아닌Context.Providervalue로 편성했던 null 또는 undefine를 가져옵니다.

contextType

해당 컴포넌트에서 가장 가까운 Context.Provider의 값을 가져올 수 있으며 해당 값은 lifecycle메소드에서 사용할 수 있습니다.

class HiHello extends React.Component {
  componentDidMount() {
    const value = this.context;
  }

  render() {
    const value = this.context;
  }
}
HiHello.contextType = FirstContext;

또는

class HiHello extends React.Component {
  static contextType = FirstContext;
  render() {
    const value = this.context;
  }
}

contextType으로 설정한 Context.Provider의 값은 this.context을 이용하여 값을 가져올 수 있습니다.
render() 메소드 또한 lifecylce의 메소드로서 this.context를 통해 현재 컴포넌트에서 가장 가까운 Context.Provider의 값을 사용할 수 있습니다.
contextType를 통해서는 가장 가까운 하나의 Context.Provider의 값만 사용 할 수 있으며 여러 Context.Provider의 값을 사용해야하는 경우 Context.Consumer를 사용해야 합니다.