useContextとは？

propsを直接渡したい子孫コンポーネントに値を渡すことができるフックです。

孫コンポーネントに値を受け渡す場合、親コンポーネントから子コンポーネントに受け渡した値をさらに孫コンポーネントに渡す。
ということが必要でしたがuseContextを利用することで直接を渡すことができます。

オブジェクト / コンポーネント	説明
Contextオブジェクト	React.createContext()の戻り値
Providerコンポーネント	Contextオブジェクトが保持しているコンポーネント
Consumerコンポーネント	useContext()を利用することで、Contextオブジェクトから値を取得できる

Contextオブジェクト

const ContextObj = React.createContext();

または、

import React, { createContext } from 'react';

const ContextObj = createContext();

Providerコンポーネント

.Providerでラップするとラップされたコンポーネントのツリー内でvalueの値を参照できるようになります。

<ContextObj.Provider
 value={ツリー内で共有可能なコンテキストオブジェクトの値}
>
 <Consumer />
</ContextObj.Provider>

import時にuseContextを読み込みます。

import React, { useContext } from 'react';

const コンテキストオブジェクトの値 = useContext(コンテキストオブジェクト);

useContextの利用

import React, { createContext, useContext } from 'react';

const ContextObj = createContext();

const Consumer = () => {
  const message = useContext(ContextObj);
  console.log(message);

  return <p>{message}</p>;
};

const message = 'React useContext';

export default function App() {
  return (
    <>
      <ContextObj.Provider value={message}>
        <Consumer />
      </ContextObj.Provider>
    </>
  );
};

useContextでContextオブジェクトから値を取得し、変数messageに格納します。

const message = useContext(ContextObj);

messageにはProviderコンポーネントにてvalueに指定された値を受け取ります。

const message = 'React useContext';

export default function App() {
  return (
    <>
      <ContextObj.Provider value={message}>
        <Consumer />
      </ContextObj.Provider>
    </>
  );
};

すると画面に「React useContext」が表示されると思います。

次はファイルを分割した場合を試してみたいと思います。