Context API

Contextは、「反応素子ツリー」においてデータをグローバルに共有することを目的とする.
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は、インサート要素にvalueを提供する

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

コンテキストデマンド

生成されたコンテキストオブジェクトの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です.プロバイダ設定なしでvalueを送信
ただし、この場合は「読み取り専用」として使用されます.