useContext - Yanonoblog!

はじめに
例
参考
続く…
- コメント

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

useContextとは？

ReactのuseContextフックは、Context APIを使って、コンポーネントツリー全体でデータを共有するためのものです。

親コンポーネントから子コンポーネントへpropsを手渡す方法よりも、複数のコンポーネント間でデータを共有するのに適した方法です。

React Contextの作成

React.createContextを使用してContextを作成します。これは次のように行います。

import React from 'react';

const MyContext = React.createContext(defaultValue);

ここでdefaultValueは、Contextが利用されるコンポーネントがツリー内に適切なProviderを見つけられない場合に使用される値です。

Context Providerの使用

次に、作成したContextを利用してデータを共有する領域を定義します。これにはProviderコンポーネントを使用します。

<MyContext.Provider value={/* 何らかの値 */}>

ここでvalue属性には、共有したいデータを設定します。

useContextフックの使用

最後に、子コンポーネントでuseContextフックを使用して、Providerから共有データを取得します。

import React, { useContext } from 'react';

function MyComponent() {
  const value = useContext(MyContext);
  // valueはProviderから提供された値
}

これにより、MyComponentコンポーネントはProviderから提供されたデータを直接受け取ることができます。

上記のようにuseContextフックを用いることで、Reactのコンポーネント間で状態を簡単に共有することができます。

これは特に、多くのコンポーネントで同じデータを使用する必要がある場合や、データを深くネストされたコンポーネントへ渡す必要がある場合に有用です。

例

アプリケーションのテーマ（明るいテーマや暗いテーマ）を管理する例を考えてみます。

1. Contextの作成

まず、テーマに関する情報を保持するContextを作成します。この例では、テーマの名前と、テーマを切り替えるための関数を格納します。

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

const ThemeContext = createContext({
  theme: 'light', // デフォルトのテーマは明るいテーマ
  toggleTheme: () => {},
});

2. Context Providerの作成

次に、ThemeContext.Providerを作成し、状態と状態を更新する関数を共有します。この例では、useStateフックを使って状態を管理しています。

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

3. useContextフックの使用

最後に、子コンポーネントでuseContextフックを使用して、テーマの情報とテーマを切り替える関数を取得します。

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      Toggle Theme
    </button>
  );
}

このようにするとThemedButtonコンポーネントは、ボタンがクリックされるとテーマを切り替えます。

また、現在のテーマに応じてボタンの色も変わります。

useContextフックはReactで状態を簡単に共有でき、深くネストされたコンポーネント間でも状態を簡単に共有できます。

画面

画面収録-2023-06-22-11 31 16

codesandbox - 動作確認用

import React, { useContext, useState } from "react";
import "./styles.css";

// コンテキストを作成
const ThemeContext = React.createContext();

// テーマを切り替える関数と現在のテーマ情報を提供するコンポーネント
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

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

// テーマに基づいてスタイルを変更するボタン
function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
    >
      Toggle Theme
    </button>
  );
}

function MainContent() {
  const { theme } = useContext(ThemeContext);

  return (
    <div className="App" style={{ backgroundColor: theme === 'light' ? 'yellow' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <h1>Hello CodeSandbox</h1>
      <ThemedButton />
    </div>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <MainContent />
    </ThemeProvider>
  );
}