Reactにおけるコンテキスト

次のフックを学ぶ前に、Reactにおける コンテキストの概念を理解する必要があります。

通常、親コンポーネントから子コンポーネントへデータを渡すには、 プロップスを使用していました。 この方法は、コンポーネントの数が少なく、 必要なコンポーネントへプロップスを渡す際に、 子コンポーネントを 2〜3回以上経由する必要がない場合には有効です。

しかし、この方法は、中間のコンポーネントで そのプロップスが全く使用されない場合（この問題は prop drillingと呼ばれます）、 または同じデータを多数のコンポーネントに 渡す必要がある場合には、非常に不便になり、 様々な問題を引き起こす可能性があります。

このような場合、コンテキストが役立ちます。 コンテキストを使用すると、親コンポーネントのデータを、 プロップスを介さずに、コンポーネントツリー内の どの子コンポーネントに対しても、その位置に関わらず 利用可能にすることができます。 したがって、データを受け取るのは、 それを必要とするコンポーネントだけになります。

コンテキストを利用するには、まず作成する必要があります。 まず、ファイルMyContext.jsを作成し、 関数createContextをインポートします：

次に、コンテキストオブジェクトを作成し、 変数MyContextに代入します。この変数は エクスポートすることを忘れないでください。 今回の例では、createContextの 初期値としてnullを設定しました （単に空の括弧にすることもできました）。 このデフォルト値は、他の値が見つからなかった場合に コンテキストを読み取るときに使用されます。 この値は任意の型にすることができます：

次のレッスンでは、別々のファイルに配置された 複数のコンポーネントで構成されるアプリケーションを作成します。 すべてのコンポーネントが一つのファイルにある場合、 コンテキストを作成するために別のファイルを作成したり、 エクスポートしたりする必要はありません。

では、MyContext.jsを 空のコンポーネントApp、 つまりデータを渡そうとしているコンポーネントに インポートしてみましょう：