React フック【useContext 】の使い方 基礎

react画像

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

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

useContextとは

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

ですが、複数の複雑化したコンポーネントがあった場合、Propsを経由してバケツリレー状態のデータを渡していくのは最善の方法とは言えません。

ReactのContext APIを利用すれば、データを子コンポーネントに渡す際にPropsを利用する事なく、 下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。

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

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

useContextフック 使い方

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

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

当記事ではContextRoot.Providerというタグでラップして処理が必要となります。

// App.js

<ContextRoot.Provider value={data}>
      <Child />
</ContextRoot.Provider>

それをせずに使用する方法もあります。

// App.js

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;

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

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

ContextRoot.Providerのタグ内のvalueはPropsの役割でありオブジェクトのdateを渡します。

この値は、そのすべての子とその子孫が利用できるようになります。

つまり、サブツリー全体でuseContextフックを使用して値を読み取ることができます。

App.jsファイルが存在する同じ階層に、ContextRoot.jsというファイルを作成します。

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

// ContextRoot.js

import { createContext } from 'react';

const ContextRoot = createContext();

expot default ContextRoot;

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

そのため、コンテキストを作成し初期化をします。

createContextの引数は元々初期値はありません。

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

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

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

新しくComponentsというフォルダを作成して下さい。

その中に、Child.jsGrandChild.jsの2つの新しいファイルを作成して下さい。

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

// Child.js

import GrandChild from "./GrandChild";

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

export default Child;
// GrandChild.js

import { 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フックを使用してコンテキストにアクセスする必要があります。

const data = useContext(ContextRoot);

ContextRootは、コンテキストオブジェクト(React.createContextから返される値)となります。

このメソッドは、そのコンテキストの現在の値を返します。

つまり、引数としてuseContextフックに渡される必要があるものとなります。

この値は、ツリー内で呼び出し元のコンポーネントの上にある、最も近い<MyContext.Provider>タグのvalue propsによって決定されます。

ContextRootのデータを取得し、それをdataという変数に再割り当てします。

そして、それを使用していくだけです。

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

npm start

DEMO

reactGIF画像

See the Pen React useContext by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

子であるChild.jsにはPropsを使用せず、グローバルとして子孫コンポーネントにデータを渡している事が分かるかと思います。

これは、データを取得してるのは子孫コンポーネントであるGrandChild.jsファイルとなります。

最後に

Reactのコンテキストは、コンポーネントツリーの深さに関係なく、子コンポーネントにグローバルデータを提供できるようにする概念となっています。

ですが、コンテキストをアプリケーションに統合するときは、かなり複雑になることを考慮してください。

しかし、アプリケーションがシンプルで小規模なアプリケーションの場合では、useContextフックはReduxの実行可能な代替手段になる可能性があります。

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

本日は以上となります。

この記事が気に入ったら、ブックマークし他の方に共有して下さい👏

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

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].