react画像

本日はReactのHookでよく用いられる、『useContext』でのデータ共有になります。

useContextフックは、React16.8以降のバージョンで使用可能です。

useContextとは
- useContext使用例

useContextとは

本来Reactでの親コンポーネントから子のコンポーネントへデータを渡す際は『props』でおこなわれます

複数の複雑化したコンポーネントがあった場合、『props』を経由してバケツリレー状態の

データを渡していくのは最善の方法とは言えません。

Reactの『Context API』を利用すれば

『props』を利用する事なく

下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。

Context APIはデータの『数値』『関数』『オブジェクト』これらを渡す時に非常に便利です。

簡単な使用例で学びましょう。

useContext使用例

create-react-appでの解説となります。

まずは最上位である親コンポーネントのApp.jsファイルから、子のコンポーネントに渡されたデータを取得します。

オブジェクトの『data』にはそれぞれ値を持たせます。

ContextRoot.Providerのタグの中の『value』に『date』を設定します。

今回では『ContextRoot.Provider』というタグでわざわざ囲まないといけない処理が必要です。

これを書かずに使用する方法もあります。

import React from "react";

import Child from "./components/Child";
import ContextRoot from "./ContextRoot";

const data = {
  number: 123,
  text: "テスト",
  funcAlert: () => {
    alert("Hello, Welcome");
  },
};

const App = () => {
  return (
    <ContextRoot.Provider value={data}>
      <Child />
    </ContextRoot.Provider>
  );
}

export default App;

App.jsファイルがある同じディレクトリ内に

『ContextRoot.js』というファイルを作成します。

ルートのファイルとなり『Context』の作成は『createContext』で行います。

imprt React from "react";
import { createContext } from 'react';


const ContextRoot = createContext();

expot default ContextRoot;

『createContext』はコンテキストインスタンスを作成する為のものとなります。

なのでコンテキストを作成し、『初期化』をします。『createContext』の引数は元々『初期値』はありません。

『createContext』の引数に『createContext(defaultValue);』を渡した場合は

Reactのドキュメントでは、デフォルト値を指定すると、『コンポーネントをラップせずに個別にテストするのに役立つ可能性がある』と明記してあります。

なので、デフォルト値が役立つ状況があります

ですが、ほとんどの場合はデフォルト値は不要または有用ではありません。

それでは、App.jsの『data』を渡して取得していきましょう。

『Components』というフォルダーを作成し

『Child.js』と『GrandChild.js』の2つの新しいファイルを作成して下さい。

子のコンポーネントと孫のコンポーネントファイルとなります。

import React from "react";

import GrandChild from "./GrandChild";

const Child = () => {
  return <GrandChild />;
};

export default Child;

import React, { useContext } from "react";

import ContextRoot from "../ContextRoot";

const GrandChild = () => {

  const data = useContext(ContextRoot);

  return (
    <div>
      <p>{data.number}</p>

      <p>{data.text}</p>

      <button onClick={data.funcAlert}>ボタン</button>

    </div>
  );
};

export default GrandChild;

『useContext()』で『value』で設定した

『ContextRoot』のデータを取得し

それを『data』という変数に格納します。

後は埋め込んで、表示させるだけとなります。

つまりデータを取得してるのは

『GrandChild.js』ファイルとなります。

それでは取得したのを表示していきましょう。

npm start

DEMO

reactGIF画像

どのように書いていくかではなく、まずはデータの受け渡しの流れを理解する事が重要です

この記事で解説した『useContext』Hookの流れの理解に役立つことを私は願っています。

deve.K

エンジニアが未来を切り開く。

React Hook【useContext 】基礎

useContextとは

useContext使用例