1. useContextとは?

useContext は、React コンポーネント間でデータを簡単に共有するための Hook です。 通常、親コンポーネントから子コンポーネントへデータを渡すには props を使用しますが、コンポーネント階層(親-子-孫構造など)が深い場合にはコードが複雑になります。

この場合、「親-孫」でデータの受け渡しをしたいのに「親-子-孫」と無関係な子のコンポーネントも経由する必要があり非効率かつ煩雑になります。

(これをpropsのバケツリレーと呼びます。)

useContext を使えば、どの階層にいても直接データにアクセスでき、コードの見通しが良くなります。

2. useContextの基本構文

useContextは、以下の構文で記述されます。

const value = useContext(MyContext);

• MyContext: 事前にReact.createContext() を使って作成したコンテキストオブジェクト。
• value: 現在のコンテキストの値。

3. サンプルコード

以下にサンプルコードを示す。

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

const ThemeContext = createContext();

export default function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeSwitcher />;
}

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>現在のテーマ: {theme}</p>
      <button
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        テーマを切り替える
      </button>
    </div>
  );
}

【解説】

• コンテキスト (ThemeContext) を使って、theme の値をどの階層のコンポーネントでも簡単に利用できます。
• ボタンを押すと setTheme によってテーマが切り替わります。

※ setTheme(theme==='light' ? 'dark' : 'light')は三項演算子と言われる論理演算子です。

三項演算子
1. useStateで管理されるthemeが"light"ならばクリックで、themeを"dark"に書き換える
2. themeが"light"以外なら、themeを"light"に書き換える

実際の画面については、以下のプレビュー参照

もしプレビューが表示されていない場合は以下の手順で表示

コマンドパレットを開く(mac: Shift+command+P, win: Shift+Ctl+P) > 「Open Preview」と入力 > 「CodeSandBox: Open Preview」を選択