Reactを基本からまとめてみた【12】【React Context】 #初心者

React Contextとは

React Context は配下の子コンポーネントにデータを渡すための便利な方法で、従来は props を使用することで、子コンポーネントにデータを渡していたが、コンポーネントのネストが深くなると非常に面倒で複雑になる。 Context を使用することで認証や UI テーマなど多くのコンポーネントが使用する情報を共有して保持・取得できる。

なぜ Context を使うのか

React Context を使うと、コンポーネントツリーの指定した部分で、共通に使えるデータストアを簡単に実装でき、ステート (state, 状態) をそのまま使うこともできる。
しかし、例えば、親ノードで定義したステートを孫ノードで変更しようと思ったら、変更の要求を孫から親の親へと伝えないといけない場合が出てくる。これは煩わしく、仕組みも複雑になり、メンテナンスしにくいコードになる場合が多い。

そこで、Context を用意する。Context からデータをとって使い、変更が必要ならそこで行うようにする。

Context API で登場するモノと役割

React では Context を使えるようにするための仕組みが、『Context API』として用意されている。Context オブジェクトを作るには createContext() 関数を呼ぶ。
Context には、関連付けされた『プロバイダ (Provider)』と『コンスーマ (Consumer)』がある。

Provider の役割は大きく二つあり、『コンテキストの適用範囲を決めること』『コンテキストにデータを置くこと』である。

Consumer はコンテキストからデータを取り出して使うために使う。コンスーマでコンテキストからデータ変更用の情報も渡されれば、データの更新をすることもできるようになる。

Provider の基本的な実装

Context オブジェクトの作成と Provider の基本形は次のようになる。

sample.js

import React, { createContext } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

const fruits = ['Apple', 'Orange', 'Banana'];
export const FruitContext = createContext();

ReactDOM.render(
  <React.StrictMode>
    <FruitContext.Provider value={{ fruits }}>
      <App />
    </FruitContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

7 行目で useContext() 関数を使って Context オブジェクトを作成する。
※後で Consumer で参照するので export する。
11 行目と 13 行目で App 要素を取り囲む。
これによりコンテキストのスコープが、コンポーネントツリーにおける App 以下になる。
また 11 行目で、 value プロパティに、データソースとなる配列を渡す。

Consumer の基本的な実装

プロバイダ側でコンテキストにセットしたデータ (ここでは fruits) は、Consumer で受け取ることができる。

sample.js

import React from 'react';
import './App.css';
import { FruitContext } from './index';

function App() {
  return (
    <FruitContext.Consumer>
      {(value) => {
        const { fruits } = value;
        console.log(fruits); // ["Apple", "Orange", "Banana"]
        return (
          <h1>...</h1>
        )
      }}
    </FruitContext.Consumer>
  );
}
export default App;

7 行目から 15 行目で Consumer を使う。
8 行目のアロー関数のパラメータとして、Provider 側で value プロパティに渡したオブジェクトが渡される。
9 行目で分割代入を使って、value から fruits を取り出す。

useContext フックを使った Consumer の基本的な実装

さらに useContext フックを使うと、Consumer がシンプルにかくことができる。

sample.js

import React, { useContext } from 'react';
import './App.css';
import { FruitContext } from './index';

function App() {
  const { fruits } = useContext(FruitContext);
  console.log(fruits); // ["Apple", "Orange", "Banana"]
  return (
    <h1>...</h1>
  );
}
export default App;

FruitContext.Consumer 要素を作成しなくても、useContext フックを使うことで、Consumer に渡される value が直ちに取得できる。

参考サイト

【レタ返】React Contextについて
 Everything you need to know about React’s Context API
AWS Amplify での Cognito アクセスは React Context.Provider を使って認証処理を Hooks 化しよう
 React Context とは？