Context API

Context는 React 컴포넌트 트리 안에서 데이터를 글로벌(Global)하게 공유할수 있도록 고안된 방법
React는 복잡한 컴포넌트 트리의 상태 공유 문제를 해결하기 위한 방법으로 Context API를 제공한다.
Context API를 사용하면 상위 컴포넌트에서 하위에 종속된 모든 컴포넌트에 데이터를 공급(Provider)한 후, 특정 위치의 컴포넌트에서 바로 수요(Consumer)하도록 설정할 수 있다.

export const AuthConetxt = React.createContext(false);

const App extends Component {
  state = {
    authentication: true
  }
  render() {
    return (
      <div className="app">
        <AuthContext.Provider value={this.state.authentication}> 
          <MenuBar />
          {/*...*/}
        </AuthContext.Provider>
      </div>
    )
  }
}

// App -> MenuBar는 전달과정 불 필요.
const MenuBar = () => (
  <div className="member">
    <SignIn />
  </div>
  )

// App -> MenuBar -> SignIn
import { AppContext } from ''app.js경로'

const SignIn = () => (
  <AuthContext.Consumer>
    { // Provider에서 value로 전달한 값이 인자로 전달됨
      (context) => context ? 
        <div className="signed">로그인 사용자</div> :
      	<div className="un-signed">로그인 필요</div>
	}
  </AuthContext.Consumer>
  )

Context의 주된 사용 목적은 복잡하게 "중첩 된" 하위 컴포넌트(들)에 데이터를 공유하는 것
Context를 사용하면 컴포넌트 재사용이 어려우므로 꼭 필요한 경우에만 사용!!

컨텍스트 생성

React.createContext API를 사용해 컨텍스트를 생성

const Context = React.createContext(초기값);

컨텍스트 공급자(Provider)

생성된 컨텍스트 객체는 Provider요소를 포함한다.
Provider는 중첩된 하위 컴포넌트(들)에게 value를 공급

<Context.Provider value={value}>
  {/* 중첩된 컴포넌트 */}
</Context.Provider>

컨텍스트 수요자(Consumer)

생성된 컨텍스트 객체의 Consumer요소는 공급받은 value를 전달 받는 콜백 함수를 통해 컴포넌트를 렌더링한다.

<Context.Consumer>
  {
    (value) => {
      // React 요소 반환
      return <></>
    }
  }
</Context.Consumer>

컨텍스트 기본값 설정

생성 된 컨텍스트 객체에 기본값을 설정할 수 있다.

const themes = {
  light: {
    main: ...,
    sub: ...
  },
  darK: {
    main: ...,
    sub: ...
  }
}

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

export default ThemeContext;

Context의 기본값은 Context.Provider 설정 없이도 value를 전달가능
단, 그런 경우 "읽기전용"으로 사용됨