Context API

context 를 이용하면 컴포넌트 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

 

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props 를 통해 전달되지만, 

애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다.

context 를 사용하면 트리마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유할 수 있다.

 

 

언제 context 를 써야 할까

하위에 있는 여러 컴포넌트들에게 props를 전달 해야 할 때 Context 를 이용하면 중간에 있는 엘리먼트들에게 props 를 넘겨 주지 않아도 전달 할 수 있다. 

 

context 를 사용 전에 고려 해야 할 것.

context 를 사용하면 컴포넌트의 재사용이 어려워지므로 꼭 필요할 때만 사용한다.

여러 레벨에 걸쳐 props 넘기는걸 대체하는 데에 context 보다 컴포넌트 합성이 간단한 해결책일 수 있다.

 

그렇다면 어느정도의 단계까지 사용하는 것이 좋을까?

하위 컴포넌트 중에 재사용을 하지 않을 컴포넌트의 경우에 사용하는 것이 좋지 않을까?

 

---

Context API

• React.createContext
• Context.Provider
• Class.contextType
• Context.Consumer
• context.displayName 

 

import React from 'react';
 
const ThemeContext = React.createContext('light');ThemeContext.displayName = 'ThemeDisplayName';
 
function App() {
  return(
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
 
function Toolbar() {
  return(
    <ThemedButton />
  );
}
 
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <button theme={this.context}>button</button>
  }
}
 
export default App;

(context API 예시 코드)

 

 

React.createContext 

context 객체를 만듭니다. 

트리 상위에서 가장 가까이 있는 Provider 로부터 현재 값을 읽습니다.

createContext 의 dafualtValue 매개변수는 트리 안에서 적절한 Provider value 를 찾지 못했을 때 쓰입니다.

 

 

Context.Provider 

Provider 는 context 를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다. 

Provider 컴포넌트는 value props 값을 하위 컴포넌트들에게 전달합니다. 

하위 컴포넌트는 value props가 바뀔 때마다 다시 렌더링 됩니다. 

! 하위 컴포넌트의 렌더링을 피하는 방법

Provider 로부터 하위 Consumer 로의 전파는 shouldComponentUpdate 메서드가 적용되지 않는다.
그러므로 상위 컴포넌트의 업데이트를 건너 뛰더라도 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 생길 수 있다. 

이를 피하기 위해서 값을 부모의 state로 끌어올려서 사용합니다. 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'dark'
    }
  }
  render() {
    return(
      <ThemeContext.Provider value={this.state.value}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

https://ko.reactjs.org/docs/context.html#caveats

 

 

Class.contextType 

context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있습니다.

그러면 그 클래스 안에서 this.context 를 이용해 해당 context 의 가까운 Provider 를 찾아 그 값을 읽을 수 있습니다.

이 값은 render() 메서드를 포함해 모든 생명주기 메서드에서 사용할 수 있습니다. 

static contextType = ThemeContext;

위의 코드는 실험적 기능인 Public class fields syntax 의 정적 클래스 프로퍼티 입니다.
정적 프로퍼티는 프로퍼티 앞에 static이 붙으며, 클래스에서 생성하는 모든 인스턴스에 대한 필드가 아닌,
클래스마다 단 한개의 필드가 존재하기를 원할 때 유용하게 사용할 수 있습니다. 
하지만 실험적 기능이므로 바벨(7이상)과 사용해야 합니다. 

+ Public class fields syntax 에 대해서 더 알아보기 

 

 

Context.Consumer

함수 컴포넌트 안에서 context 를 읽을 때 사용합니다.

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

이 함수가 받는 value props는 가장 가까운 Provider value props 와 동일합니다. 

 

 

Context.displayName

 context 객체는 displayName 문자열 속성을 설정할 수 있습니다.

React 개발자 도구에서 이 문자열을 사용하여 context 를 어떻게 보여줄 지 결정합니다. 

 

 

 

ko.reactjs.org/docs/context.html