React - コンテキストAPI

コンテキスト API

定義

• 他のコンポーネントにデータを渡す際、プロップを使用せずにデータを渡せるようにするReactの組み込みAPI

必要性

• 全体的に必要なデータは最上位コンポーネントAppでstateを利用して管理し、propを利用してこの値を
  伝達するが、多数のコンポーネントを経由する必要がある場合、このプロセスは非常に複雑になる。
  これをContext APIを利用すれば簡単に解決できる。

使用方法

生成

• Context APIはcreateContextメソッドを利用して生成可能である

• 生成時には引数を1つ渡す必要があり、この値は後述するプロバイダーの値が存在しない場合に使用される

  • サンプルコード

  react import {createContext} from 'react'; const testContextAPI = createContext(''); export default testContextAPI;

値の渡し方

• 値を渡す方法には3つの方法が存在する

プロバイダー

• Providerを使用してそのコンポーネントをラップすると、プロバイダーコンポーネントの子コンポーネントにContextの値を提供する役割を担う - 例

react //TContext.js import {createContext} from 'react'; //単一データ方式const testContextAPI = createContext('white');//複数データ方式const testContextAPI = createContext({ { userData: { name: 'Blackburn', age: '22' } }});export default testContextAPI;

//App.js...return ( <TContext.Provider value={"green"}> </TContext.Provider>);~~~

• 上記のコードでは、valueの値は必須であり、Providerを使用してもvalueを挿入しない場合、エラーが発生する。- プロバイダーコンポーネント（TContext.Provider）の下位コンポーネントであるExComponentでは、Context APIの値を取得して使用できる。

消費者

• Consumerコンポーネントを利用すると、既存のプロパティを使用して値を取得することなく、データの参照が可能である- Consumerコンポーネントは、以下の方法を使用して利用することができる

使用方法

react return( <コンポーネント名.Consumer> { value=> ( <> {値名} </> )} </コンポーネント名.Consumer> );

サンプルコード

react import UserData from './Data/UInfo';

const UserUI = () => { return( <UserData.Consumer> { value => ( <>

useContext

• useContext() フックを使用すると、どのコンポーネントからでも提供された値にアクセスできる

使用方法

react関数 ExFunc(){ const contextData = useContext(context 名前); };

• 上記のように値を取得して使用可能である

サンプルコード

react import UserData from './Data/UInfo';

function UserUI(){ const { userInfo } = React.useContext(UserData); return { { userInfo }, { { { userInfo }, { { { { { {
return( <>

参考資料

[React] Context APIの概念及び使用方法

実践！Spring BootとReactで始めるモダンWebアプリケーション開発

Reactを扱う技術