【React】UseContext、createContextの使い方

Contextとは？？

コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。
参考:https://ja.reactjs.org/docs/context.html

Contextを使うことで別のコンポーネントにpropsを渡して、さらに別のコンポーネントに渡すといったバケツリレーをする必要がなくなります。

ここでは本当の基礎の基礎でコンポーネント間でcontextを使ってデータを渡します。
（本当はリファクタリングなどやることはいろいろありますが…）

• フォルダ構成
  src
  components
  ├ HelloChild.js
  ├ CountChild.js
  Example.js

ちょっと分りにくいですが、
componentsフォルダの中にHelloChild.js、CountChild.js
srcフォルダ直下にExample.jsを配置しています。

Example.jsが親、HelloChild.jsとCountChild.jsが子です
HelloChildは単に「hello」と表示する、CountChild.jsは数字のカウントをするコンポーネントです。

• 使用するコード
  src/Example.js

import { createContext, useState } from "react";
import CountChild from "./components/CountChild";
import Hello from "./components/HelloChild";

// import OtherChild from "./components/OtherChild";
export const MyContext = createContext();

const Example = () => {
  const text = "hello";
  const [count, setCount] = useState(0);
  return (
    <div>
      {/* MyContext.Providerのvalueに渡したい変数などを入れる */}
      <MyContext.Provider value={text}>
        <Hello />
      </MyContext.Provider>
      <MyContext.Provider value={[count, setCount]}>
        <CountChild />
      </MyContext.Provider>
    </div>
  );
};

export default Example;

親コンポーネントではMyContextという変数をcreateContextを使って作ります。
渡したい変数であるtextとカウントするために使う[count,setCount]を宣言しておきます。この2つをcontextを用いて渡します。

次にMyContext.Providerのvalueに渡したい変数などを入れます
helloを渡したければ、格納されている変数textをvalueに入れてあげます。

<MyContext.Provider value={text}>
        <Hello />
</MyContext.Provider>

カウントのために使う[count,setCount]も同様です。

src/components/Hello.js

import { useContext } from "react";
import { MyContext } from "../Example";

const Hello = () => {
  const helloText = useContext(MyContext);
  console.log(helloText);//hello
  return <h3>{helloText}</h3>;
};

export default Hello;

Hello.jsでは親コンポーネントで渡されてきたtextを受け取る処理をします。
まず、親コンポーネントでexportされているMyContextをimportします。
そのMyContextをHooksであるuseContextで受け取ります。(helloText)
console.logで確認するとhelloが格納されています。
あとは出力するだけです。

src/components/CountChild.js

import { useContext } from "react";
import { MyContext } from "../Example";
const CountChild = () => {
  const [count, setCount] = useContext(MyContext);
  const clickHandler = (e) => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <button onClick={clickHandler}>+</button>
      <h3>{count}</h3>
    </div>
  );
};
export default CountChild;

CountChild.jsではカウントのために使う[count,setCount]が親コンポーネントから渡されてきてカウントアップの処理をします。

やっていることはHelloText.jsと同じです。useStateで宣言した変数やセットするためのものもそのまま持ってこれるので便利です。

あとはbuttonを使ってcountアップするだけです。

表示結果は以下の通りです

このようにしてcontextを使うと簡単にコンポーネント間で値などを渡すことができます。他の使い方やConsumerもあるので別に書きたいと思います。