Context API｜Agile育成ブログ

Reactが基本的に持ってるメインストリージもあります。それがcontextです。
そしてこのcontextを生成してくれるAPIがContext API

contextの生成

createContextというメソッドを使って生成できます。

import { createContext } from 'react';
export const LanguageContext = createContext("kr");

このようにcreateContextで生成したcontextオブジェクトにはProviderとConsumerという特別なReactコンポーネントが入ってます。

Provider

Providerはvalue propsを用いて子コンポーネントたちにstateを渡す役割です。Providerの中にあるすべての子コンポーネントはそのcontext内のデータにアクセスできます。

import React from 'react';
import LanguageContext from './LanguageContext'; //上で作ったcontext
import MainContent from './MainContent';　//コンポーネント
import Header from './Header';　//コンポーネント

export const App = () => {
  return (
    <LanguageContext.Provider value="kr">
      <div className="App">
        <Header />
        <MainContent />
      </div>
    </LanguageContext.Provider>
  );
}

これでHeaderとMainContentがcontextにアクセスできるようになりました。基本的にはConsumerでアクセスできます。

Consumer

ConsumerはProviderから渡されたstateをもらって使う役割です。
MainContentコンポーネントのコードで表すと

import React from 'react';
import LanguageContext from './LanguageContext';

export const MainContent = () => {
  return (
    <LanguageContext.Consumer>
      {(language) => (
        <section language={language}>
	//何らかの内容
	</section>
      )}
    </LanguageContext.Consumer>
  );
};

Consumer内の関数でstateを使うことができます。Providerのvalueでkrを渡してましたから、このlanguageはkrになってるはずです。