React.js プログラミング

ReactのContextを使ってコンポーネント間でデータを共有する方法

ReactのContextは、コンポーネント間でデータを共有するための仕組みです。Contextを使うことで、プロパティを親から子に渡す必要がなくなり、コンポーネントのネストを浅くすることができます。この記事ではContextの使い方や実装例を紹介します。

Contextの使い方

Contextを使ってデータを共有するためには、以下のステップが必要です。

  1. Contextを作成する
    createContextでContextを作成します。引数にはContext内で使用する値のデフォルト値を設定します。

  1. Contextを提供する
    Contextを提供したいコンポーネントを<MyContext.provider>で囲むことで。それより内側のコンポーネント内でContextで設定されている値が共有されます。

  1. Contextを消費する
    Contextで設定した値を取得(消費)するにはuseContextフックを使用します。以下の例ではMyContextからdataを取得しています。

このように、Contextを使うことで、親のコンポーネントから値を渡すことなく、子のコンポーネントにデータを渡し消費させることができます。

Contextを使った実装例

例としてテーマの変更などアプリ全体で共通する設定を管理する場合にContextを使うことができます。

ThemeContextを作成

createContext関数を使用して、ThemeContextを定義しています。初期値として、lightを設定しています。

AppコンポーネントにThemeContextを提供

AppコンポーネントではThemeContext.Providerコンポーネントを使って、アプリ全体で使用するthemeステートの値をThemeContextに提供しています。
また、useStateフックを使用して、themeステートを管理します。toggleTheme関数を定義し、themeステートを'light'と'dark'のいずれかに切り替えるようにしています。

ChildコンポーネントでThemeContextを消費

useContextフックを使用して、ThemeContextから現在のテーマを取得し、それに応じてスタイルを適用するようにしています。

まとめ

本記事ではReactでContextを使用する3つの手順を説明しました。

  1. createContext関数を使用して、Contextを定義する。
  2. Context.Providerコンポーネントを使って、Contextを提供する。
  3. useContextフックを使用して、Contextの値を消費する。

-React.js, プログラミング

© 2023 Shiro's secret base