react context

[YeonjuOHYE]

Context

왜 사용?

전역적으로 사용하는 값들 prop으로 전달할 필요 없이 필요할 때 바로바로 사용할 수 있도록 (I feel it's like static?)

Context 객체 만들기

const MyContext = React.createContext(defaultValue);

• 렌더링시 React는 트리 상위에서 가장 가까이에 있는 짝이 맞는 Provider로 부터 현재값 읽는다.
  • defaultValue란 트리 안에서 적절한 Provider를 찾지 못했을 때만 사용된다.

Context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

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

• Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 된다. ※ 해당 전파는 shouldComponentUpdate의 영향을 받지 않기 때문에 중간에 있는 컴포넌트가 업데이트를 중지한다고 해도 트리 끝에 있는 컴포넌트까지 전달됨(정확히 어떤 상황이지...)

Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* MyContext의 값을 이용한 코드 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* ... */
  }
}
MyClass.contextType = MyContext;

• createContext로 생성한 Context 객체를 원하는 contextType 프로퍼티로 지정할 수 있다. 그러면 그 클래스 안에서 this.context 를 이용해 해당 Context의 가장 가까운 Provider를 찾아 그 값을 읽을 수 있게 된다.

※ 위 방법은 하나의 context만을 구독할 수 있다. 여러 context를 구독하는 방법은 아래에 정리해 놓을 테니 필요할 때 찾아서 봐라

Context.Consumer

Class.contextType 을 함수 컴포넌트에서 사용할 떄 쓴다.

import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";

export const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

export const ThemeContext = React.createContext(themes.dark);

class ThemeButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return <button {...props} style={{ backgroundColor: theme.background }} />;
  }
}

ThemeButton.contextType = ThemeContext;

function Toolbar(props) {
  return <ThemeButton onClick={props.changeTheme}>Change Theme</ThemeButton>;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme: state.theme === themes.dark ? themes.light : themes.dark
      }));
    };
  }

  render() {
    return (
      <div>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <ThemeButton />
      </div>
    );
  }
}

export default App;

• 위의 경우 Provider 안에 있는 경우는 default 색깔도 light 이고, 토글도 작동하는 방면 아래의 경우 context의 default인 dark로 작동한다.

하위 컴포넌트에서 context 업데이트 하기

import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";

export const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {}
});

function ThemeToggleButton() {
  return (
    <ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <button
          onClick={toggleTheme}
          style={{ backgroundColor: theme.background }}
        >
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme: state.theme === theme.dark ? themes.light : themes.dark
      }));
    };

    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme
    };
  }

  render() {
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeToggleButton />
    </div>
  );
}

export default App;