Context란?

Context를 사용하면 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있다. 즉, 전역적으로 데이터를 공유할 수 있다.

 

포털의 메인 화면을 생각해보자. 

아래 포털은 기본적으로 일반 모드이지만, 사용자가 취향에 따라서 다크 모드로 토글할 수 있다. 

 

포털의 일반 모드, 다크 모드

시퀀스를 따져보자면 아래와 같다. 

 

 

1. 사용자가 다크 모드로 변환 버튼을 클릭한다. 

2. 변환 버튼은 최상위 컴포넌트로 state를 끌어올린다. 

3. 최상위 컴포넌트는 state를 변환하고, 다크모드 Style로 변경한다. 

setState({background: "dark"});

4. 하위 컴포넌트는 부모 컴포넌트가 변환되었음을 감지하고 Render를 수행하며 다크모드를 적용한다. 

 

 

최상위 컴포넌트부터 아주 깊은 컴포넌트까지 props를 전달하는 매우 번거로운 과정이다. 

context를 이용하면 명시적으로 props를 넘겨주지 않아도 하위 컴포넌트가 이를 공유할 수 있다. 

 

import React from "react";

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

class App extends React.Component {
  render() {
    // Provider를 통해서 하위 트리에 테마값을 보내줍니다.
    // 아무리 깊숙히 있어도, 모든 컴포넌트가 이 값을 읽을 수 있습니다.
    // 아래 예시에서는 dark를 현재 선택된 테마 값으로 보내고 있습니다.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 현재 선택한 테마 값을 읽기 위해 contextType을 지정합니다.
  // React는 가까이 있는 ThemeContext.Provider를 찾아 그 값을 사용할 것입니다.
  // 이 예시에서 현재 선택된 테마는 dark입니다.
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

 

컴포넌트가 전역적으로 관리해야하는 로케일, 테마, 데이터 캐시 등을 관리하는 데에 사용할 수 있다. 

 

 

 

Reference. 

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