ReactのuseContextについて

更新日 : 2023/9/22

完全に思いつきで今後私が使うタイミングがあるかどうか不明ですが、ReactのuseContextについてまとめます。

useContextとは

まずはReactのuseContexとは何かを簡単に説明します。

簡単にざっくりいうと、WEBアプリケーション内の変数をコンポーネント間でグローバルに共有できる機能です。

Reactでは複数のコンポーネントを作成し、そのコンポーネントを組み合わせることで1つのアプリケーションを作ります。
その際、コンポーネント間で変数の受け渡しが発生するかと思いますが、親コンポーネントから孫やひ孫コンポーネントへ変数を渡したい場合、
子コンポーネントには必要のない変数だったとしても、子コンポーネントを経由して孫へバケツリレーする必要があります。
その面倒くささを解決してくれるのがuseContextなんですね。

useContexの使い方

useContextの使い方の順序を大きく分けると、以下のような感じになります。

新しくコンポーネントを作成して、グローバル管理する変数を定義する
変数を参照したい範囲を、１で作成したコンポーネントで囲む
コンポーネントからグローバル管理している変数を参照する

ここから、それぞれについて少し詳しくまとめます。

１．新しくコンポーネントを作成して、グローバル管理する変数を定義する

いきなりですが、Reactのコードで書くと以下のような感じです。

ContextProvider.js

1import React, { createContext } from "react";
2
3export const StrContext = createContext({});
4
5export const ContextProvider = (children) => {
6    const contextStr = "グローバルで使える文字列です";
7    return (
8        <StrContext.Provider value={{ contextStr }}>
9            {children}
10        </StrContext.Provider>
11    );
12};
13

ざっくり説明すると、
createContext({})で作成した変数.ProviderでChildrenを囲み、
グローバルで使いたい変数を、そのタグのvalueに設定します。

２．変数を参照したい範囲を、１で作成したコンポーネントで囲む

またいきなりですが、Reactのコードで書くと以下のような感じになります。

App.js

1import { ContextProvider } from "./provider/ContextProvider";
2import React from "react";
3
4export default function App() {
5    return (
6        <ContextProvider>
7            <MainContents />
8        </ContextProvider>
9    );
10}

グローバルな変数を使用したいコンポーネントを先程作成したコンポーネントで囲みます。
これで変数をグローバルな変数を使用する準備は完了です。
また、上記はApp.jsでアプリケーションの大元から囲んでいますが、より下の階層で囲んでも全く問題ありません。

３．コンポーネントからグローバル管理している変数を参照する

またまたいきなりですが、Reactのコードで書くと以下のようになります。

UseDataComponent.js

1import React, { useContext } from "react";
2import { StrContext } from "./providers/ContextProvider";
3                                
4export const UseDataComponent = () => {
5    const context = useContext(StrContext);
6    return (
7        <div>
8            {context.contextStr}
9        </div>
10    );
11};

まずは、useContexとcreateContext({})で作成した変数をインポートします。
そして、createContext({})で作成した変数をuseContex()の引数に渡します。
あとは、１でvalueに渡した変数（グローバルな変数）を好きな箇所で参照するのみです。
私はこの部分でどのコンポーネントから何をインポート、参照すればよいかごちゃごちゃしていて混乱しました笑。

最後に

以上、useContextの使い方でした。

便利ですが、若干ごちゃっているので慣れるまでは少し苦戦しそうな気がします（私だけ。。？）

それでは！