Context

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달된다.
하지만 언어나 테마같이 여러 컴포넌트에 전해줘야하는 props가 있을 경우, 이 과정이 번거로울 수 있다. (props drilling 발생..)

이때 context를 이용하면, 트리 구조에서 단계마다 props를 넘겨주지 않아도 많은 컴포넌트가 값을 공유하도록 할 수 있다.
Context - React

언제 context를 써야할까?

context는 React 컴포넌트 트리 안에서 전역적(global)인 값을 공유할 수 있도록 고안된 방법이다.
e.g. 현재 로그인한 유저, 사용자가 선호하는 언어, 테마 등..

예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 3단계나 넘겨주고 있다.

class App extends React.Component {
  render() {
    return <Toolbar theme='dark' /> // props 1차 전달
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemeButon theme={props.theme} /> // props 2차 전달
    </div>
  );
}

class ThemeButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} /> // props 3차 전달
  }
}

위의 코드에서 context를 사용하면, props를 전달하지 않고 아래처럼 작성할 수 있다.

const ThemeContext = React.createContext('light'); // createContext() 메소드로 context를 생성할 수 있다.

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value='dark'> // Provider를 이용해 하위 트리의 모든 컴포넌트에 테마 값을 보내줄 수 있다.
        <Toolbar /> // props 전달 X
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemeButon /> // props 전달 X
    </div>
  );  
}

class ThemeButton extends React.Component {
  static contextType = ThemeContext; // 가장 가까이 있는 Provider를 찾아 값를 읽어온다.
  render() {
    return <Button theme={this.context} /> // 'dark'
  }
}

---

Context API

React.createContext()

: Context 객체를 만드는 메소드

• Context 객체를 구독하고 있는 컴포넌트가 렌더링될 때, React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.
• 이때 React가 트리 안에서 적절한 Provider를 찾지 못했을 경우 defaultValue가 쓰인다.

const ThemeContext = React.createContext('light');

---

<Context.Provider>

: context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 하는 React 컴포넌트

• Provider는 value prop을 받아서 이 값을 하위 컴포넌트들에게 전달한다.
• Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시된다.
• Provider 하위에서 context를 구독하는 모든 컴포넌트들은 Provider의 value prop이 바뀔 때마다 다시 렌더링된다.

<ThemeContext.Provider value='dark'>
  <하위 컴포넌트>
</ThemeContext.Provider>

---

Class.contextType

: React.createContext()로 생성한 Context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있다.

• 이 프로퍼티를 활용해 클래스 안에서 this.context로 해당 Context의 값을 읽을 수 있다. (이때 가장 가까운 Provider를 찾아 값을 읽어온다.)

class ThemeButton extends React.Component {
  static contextType = ThemeContext; // ThemeButton 클래스의 contextType 프로퍼티로 ThemeContext 객체를 지정
  render() {
    let value = this.context;
    /* context 값을 이용한 렌더링 */
  }
}

• 이렇게 읽어온 값은 render()를 포함한 모든 컴포넌트 생명주기 메소드에서 활용할 수 있다.

class ThemeButton extends React.Component {
  componentDidMount() {
    /* context 값을 이용한 코드 */
  }
  componentDidUpdate() {
    /* ... */
  }
  componentWillUnmount() {
    /* ... */
  }
    
  render() {
    let value = this.context;
  }
}
ThemeButton.contextType = ThemeContext; // ThemeButton 클래스의 contextType 프로퍼티로 ThemeContext 객체를 지정

---

<Context.Consumer>

: context 변화를 구독하는 React 컴포넌트
이 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다.

• Context.Consumer의 자식은 함수여야 하며, 이 함수는 context의 현재값을 받고 React 노드를 반환한다.

<ThemeContext.Consumer>
  {value => <함수 컴포넌트 value={value} />}
</ThemeContext.Consumer>

---

Context.displayName

: Context 객체는 displayName이라는 문자열 속성을 설정할 수 있다.
React 개발자 도구는 이 문자열을 사용해서 context를 어떻게 보여줄지 결정한다.

const ThemeContext = React.createContext('light');
ThemeContext.displayName = 'ColorTheme';

<ThemeContext.Provider> // 'ColorTheme.Provider' in DevTools
<ThemeContext.Consumer> // 'ColorTheme.Consumer' in DevTools

---

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

context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것이다.

단순히 props drilling을 대체하기 위해 context를 사용해서는 안된다. context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문이다. 따라서 꼭 필요할 때만 사용해야한다. props drilling을 해결하기 위해서는 컴포넌트 합성을 사용하는 것이 좋다.