前回までの状態

useEffectについて学習した。

今回の目的

useContextについて

useContext

値を受け渡す際に使用する。
propsを使用してコンポーネントからコンポーネントへ値を受け渡す場合、親コンポーネントから子コンポーネントへのバケツリレーになる。しかしuseContextを使用すると直接値を受け渡すことができる。

宣言

const Contextの変数名 = React.createContext(Contextの初期値);

受け渡し

<Contextの変数名.Provider value=受け渡す値>
<Contextを使用するコンポーネント>
</Contextの変数名.Provider>

手順

前回作成したindex.tsxを以下のように変更、追加する。

import ReactDOM from 'react-dom';
import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加

const Name = React.createContext('')//追加


const TextOutput = () => {
  const name = useContext(Name);//追加
  return (
    <p>Hello, {name}!</p>//変更
  );
}

//コンポーネント追加
const Space = () => {
  return (
    <TextOutput />
  );
}

const TextInput = () => {
  const [str, setStr] = useState('初期値');

  useEffect(() => {
    document.title = `input is ${str} !`;
  });

  return (
    <div>
      <form >
        <label>
          入力欄<br />
          <textarea
            value={str}
            onChange={event => setStr(event.target.value)}
          />
        </label>
      </form>
      <Name.Provider value={str}>{/* 追加 */}
        <Space />{/* 変更 */}
      </Name.Provider>{/* 追加 */}
    </div>
  );
}

ReactDOM.render(
  <TextInput />,
  document.getElementById('root')
);

いつも通り、npm startでプロジェクトを実行する。
'Hello, [入力した文字列]!'が表示されれば成功。

解説

import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加

useContextを使用するため、インポートしている。

const Name = React.createContext('')//追加

Nameを''で初期化し宣言している。

const TextOutput = () => {
  const name = useContext(Name);//追加
  return (
    <p>Hello, {name}!</p>//変更
  );
}

Nameの値をuseContextを使用してpropsを使用することなくnameに受け取り、表示させている。

//コンポーネント追加
const Space = () => {
  return (
    <TextOutput />
  );
}

useContextを使用するのが孫コンポーネントでも問題ないことを明らかにするために追加したコンポーネント。

      <Name.Provider value={str}>{/* 追加 */}
        <Space />{/* 変更 */}
      </Name.Provider>{/* 追加 */}

Space以下のコンポーネントで、値がstrのNameを受け渡すことをProviderを使用して宣言している。

要約

useContextを使用することでpropsなしの値受け渡しが可能になる。

次

作成中

2021/11追記:転職できました

参考文献