コンテキスト (Context)とは

Reactのコンテキスト (Context)は、コンポーネントツリー全体でデータを共有するための仕組みです。

通常、Reactではデータはpropsを通じて親コンポーネントから子コンポーネントに渡されますが、コンテキストを使用すると、中間のコンポーネントを経由せずにデータを直接渡すことができます。

コンテキストは、以下のようなシナリオで役立ちます。

複数のコンポーネントで同じデータにアクセスする必要がある場合、コンテキストを使用してグローバルなデータを共有できます。

例えば、ユーザーの認証状態やテーマの情報などが該当します。

コンテキストを使用すると、データを中間のコンポーネントを介さずに深い階層のコンポーネントに渡すことができます。

これにより、propsを手動で逐一渡す手間を省くことができます。

コンテキストの使用手順は次の通りです

React.createContext() メソッドを使用して、新しいコンテキストオブジェクトを作成します。

コンテキストのデータを提供するために、プロバイダーコンポーネントを作成します。

このコンポーネントはコンテキストの値を指定し、子コンポーネントに渡します。

データを受け取るコンポーネントを作成します。

このコンポーネントは useContext() フックを使用してコンテキストの値を取得し、それを利用してUIをレンダリングします。

以下は、簡単な例を示します。

上記の例では、MyProvider コンポーネントでコンテキストを提供し、MyComponent コンポーネントでコンテキストの値を取得して表示しています。

App コンポーネントで MyProvider をラップすることで、コンテキストがアプリケーション全体に渡されます。

このように、Reactのコンテキストを使用することで、データの共有やプロパティの受け渡しを簡素化できます。

ただし、適切に使用しないとコンポーネント間の依存関係が複雑になる可能性があるため、注意が必要です。