Context API

상태관리해주는 리액트 내장 기능.
컴포넌트 설계가 깊지 않은경우 복잡한 리덕스를 사용하지 않고도 간단하게 상태관리가 가능함.

단계마다 props를 넘기지 않고도 컴포넌트 트리 전체에 상태데이터 제공가능

How To Use

1. context 객체 생성

import React, {createContext} from 'react';

const MyContext = createContext();

export default MyContext;

Provider(context의 시작점? 모든것을 담고있음) 생성할 준비 완료.

context는 다수의 context를 만들 수 있다 (리덕스store는 1개유일)

2. context.Provider 작성

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

3. 예시

type1. 기존방식(props로 넘기기)

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

type2. context api

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

class App extends React.Component {
  render() {
     //provider에 value로 프롭스를 내려준다. 
    // 아무리 깊숙히 있어도, 모든 컴포넌트가 이 값을 읽을 수 있다.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요 없음. 
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 현재 선택된 테마 값을 읽기 위해 contextType을 지정
  // React는 가장 가까이 있는 테마 Provider를 찾아 그 값을 사용할 예정
  static contextType = ThemeContext;

  render() {
    return <Button theme={this.context} />;
  }
}

4. 사용시 주의사항

• context를 사용하면 컴포넌트 재사용이 어렵다.
• Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 생길 수도 있음 (value 바뀔때마다 렌덩링=> 값을 부모 state로 끌어올리기 or useMemo?)

더 알아보기

• class 컴포에서 static타입을 사용하여 전역에 접근가능하다 하지만 함수형에서는 사용불가
  ==> hooks를 이용하여 접근가능한 방법이 있음
  https://ko.reactjs.org/docs/context.html