[React] Context

Context 란?

Context는 모든 자식 컴포넌트에 props로 전달하지 않고 데이터를 전달할 수 있는 방법이다.

데이터는 top-down 방식으로 props를 사용하여 전달하는 경우,

사용하려는 자식 컴포넌트에 도달할 때까지 모든 컴포넌트에 props로 전달해야 한다는 번거로움이 있다.

context는 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있어 props 전달없이 데이터를 확인할 수 있다.

이는 사용자 정보, 테마, 언어 등을 관리할 때 사용할 수 있다.

 

☝🏻 만약, 단순히 많은 단계를 거쳐 props를 전달하는 것을 피하기 위함이라면 context 보다는 component composition 이 더 나은 방법일 수 있다.

 

---

API

 

React.createContext

const MyContext = React.createContext(defaultValue);

context object 를 생성한다.

리액트가 context object를 구독하는 컴포넌트를 랜더링할 때, 트리에서 가장 근접한 Provider에 매칭되어 현재 context 값을 읽는다.

defaultValue

트리에서 컴포넌트에 일치하는 Provider가 없는 경우에만 사용된다.

기본값은 컴포넌트를 wrapping 하지 않고 독립적으로 테스트하는 경우에 유용하다.

 

 

Context.Provider

<MyContext.Provider value={initialValue}>

모든 Context object는 Provider React Component를 제공한다.

Provider는 value prop를 입력받고, 그 값을 Provider의 하위 컴포넌트인 consuming components에 전달한다.

하나의 Provider는 많은 consumers에 연결될 수 있다.

Provider의 value 값에 변경 사항이 있을 때마다 하위 컴포넌트들은 re-render 된다.

Provider에서 하위 consumer로의 전파는 shouldComponentUpdate 메소드의 영향을 받지 않으므로 상위 컴포넌트가 업데이트를 건더뛰더라도 consumer는 업데이트된다.

변경 사항은 이전 값과 새로운 값을 비교하여 결정되고, Object.is() 와 동일한 알고리즘을 사용한다.

 

 

Class.contextType

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

클래스에서 contextType 특성은 Context object 를 대입할 수 있다.

this.context를 사용하여 가장 근접한 context 값을 사용할 수 있다.

 

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

static class field를 사용할 수 있다.

static

static는 instance가 아닌, 클래스에 종속된 property를 의미한다.

☝🏻 contextType API를 사용하면 하나의 context 만 사용할 수 있다.

 

 

Context.Consumer

<MyContext.Consumer>
	{value}
</MyContext.Consumer>

context 변경 사항을 구독하는 React component 다.

이 컴포넌트를 사용하여 function component 내에서 context를 구독할 수 있다.

하위에 함수가 필요하고, 그 함수는 현재의 context 값을 받고 React node를 반환한다.

value 인자가 전달되는 함수는 근접한 context의 value 값과 같은 값이다. 만약, 근접한 Provider가 없는 경우 createContext의 defaultValue 값을 전달받는다.

 

 

Context.displayName

const MyContext = React.createContext(defaultValue);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // 'MyDisplayName.Provider' in DevTools
<MyContext.Consumer> // 'MyDisplayName.Consumer' in DevTools

displayName 은 string property 다.

React DevTools는 컨텍스트에 표시할 내용을 결정한다.