おかえりなさい、友達！


今日は useContext と呼ばれる React Hook の基本について説明します。 useContext は、useState をさらに一歩進んで、props を直接渡さずに子コンポーネントや孫コンポーネントに情報を渡すことができるグローバルのような State を作成する強力なツールです。

しかし、私は自分自身の先を行っています。
useState に詳しくない場合は、まず前の記事に飛んで読んでから、戻ってきて驚かれる準備をしてください。


「useState」の使用方法: https://dev.to/deborah/how-to-use-state-in-react-2pah

「useState」について理解したところで、「useContext」について詳しく見ていきましょう!

useContext とは何ですか?:

useContext は、グローバル スコープに配置する必要があるデータ (アプリケーション全体で誰かをログイン状態に保つユーザー名など) に最適ですが、これは、プロパティを子コンポーネントに渡します。
ただし、useContext を使用すると、props を直接渡さずにデータを渡すことができるため、複数の子コンポーネントからアクセスする必要があるデータや、アプリケーション全体で使用できるようにする必要があるデータに遭遇した場合に非常に役立ちます。

useContext を起動して実行するには、2 つの手順を実行する必要があります。まず、コンテキスト オブジェクト ('createContext') を作成する必要があります。次に、フック 'useContext' を使用してプロバイダ経由で値にアクセスする必要があります。 。

次の例は、useContext の概要とその使用方法をよりよく理解できるように簡略化されていますが、createContext は独自の別のファイルで宣言されることが多いことに注意してください。ただし、私は「Parent.js」を典型的な「App.js」ファイル（コンポーネント階層の最上位のコンポーネント）に例えています。 Parent.js では、すべての状態変数とそれらの状態変数を更新する関数を定義し、useEffect を使用してデータベースにフェッチしました。 Context の核となる概念をよりよく理解できるように、この説明を簡素化するために、独自のファイルを作成するのではなく、トップレベルのコンポーネントで createContext を宣言することにしました。

以上のことを踏まえて、最初の createContext から始めましょう。

1. 最初に行う必要があるのは、「Context」と呼ばれる変数を宣言してエクスポートすることです。これは後ほど子コンポーネントで使用します [コードをよりシンプルにするために変数を作成しています。後でアクセスするための値 (データ):

export Context = React.createContext();

「Context」は、「createContext」を呼び出して作成されたコンテキスト オブジェクトです。コンテキスト オブジェクトは Provider と呼ばれるコンポーネントを保持します。これを呼び出して、「グローバル」レベルで保持したい変数や関数を渡すことができるようになります。

2. 「Context」変数を使用して、return ステートメントの JSX にジャンプしましょう。ここでは、「Context」を呼び出して開始タグ (山かっこ) で囲み、次のように Provider も呼び出します。

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

「Context.Provider」を完了するには、「Provider」に値を指定する必要もあります。ここで、子コンポーネントの「コンテキスト」で呼び出すすべての変数と関数を含むオブジェクトを渡します:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

変数と関数を使用するすべての子コンポーネントをタグの間に置く必要があることに注意することが非常に重要です。例えば：

return(
    
);

プロパティを「value」内に置く限り、(「useState」の場合のように) プロパティを子コンポーネントに直接渡す必要がないことに注意してください。

createContext を使用し、すべてのグローバル項目を「Context.Provider」に渡したので、子コンポーネントに進み、「Context」の使用方法を確認する準備が整いました。

3. (この例のために) ファイル「Child.js」に格納されている子コンポーネントに進みましょう。コーディングは人生と同じで、何かを使用したい場合は、それをインポートする必要があります。先に進み、「Parent.js」で宣言した場所から「Context」を取得して、この子コンポーネント (「Child.js」) で使用できるようにしましょう。

import Context from ‘./Parent.js’;

4. 子コンポーネントの「Context」にアクセスできるようになったので、「useContext」をファイルにインポートして、「Context」を渡すことができるようにする必要があります（これについては後ほど詳しく説明します）。

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. 素晴らしい！それでは「useContext」を使ってみましょう。まず、「useContext」を使用する変数を宣言する必要があります。 useState を宣言する場合と同様の方法でコンポーネント内でこれを行います。

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

このコードでは、中括弧 {} を使用して、代入の構造化を示しています。これは、Context に格納されている複数の変数や関数を呼び出すことができると言う派手な方法です。また、「Context」を「useContext」に渡して、Context.Provider (「Parent.js」で宣言した) で定義された値にアクセスできるようにします。



6. 信じられないかもしれませんが、準備は完了です。通常 State を使用するのと同じように、コード内でコンテキスト値を使用できるようになりました。例えば：

const expId = example.id;

または

setExample(newExample);

要約しましょう:

おめでとう！これで、createContext と useContext を開始するためのツールがすべて揃いました。 useContext を使用すると、子コンポーネントを介して props を直接渡すことなく、変数や関数をコンポーネントに渡すことができる「グローバル状態」のようなものを作成できることがわかりました。

また、アプリケーションでコンテキストを機能させるために必要な 6 つの手順についても詳しく説明しました。これで、createContext と useContext を使用してコーディングを開始する準備が整いました。ただし、クイックスタート ガイドが必要な場合に備えて、ここにアクセスしてください:

親コンポーネントで、「createContext」を使用して「Context」という変数を宣言し、エクスポートします。

export const Context = React.createContext();

親コンポーネントの JSX で、コンテキストにアクセスする必要があるすべての子コンポーネントを Context.Proivder でラップし、オブジェクト内の変数/関数を渡します。

   //Child components

子コンポーネントで、「useContext」をインポートします。

import React, { useContext } from ‘react’;

また、親コンポーネントから「Context」をインポートします。

import Context from “./Parent.js’;

次に、 useContext を使用して「Context」変数を渡します。

const { example, handleExample } = useContext(Context);

最後に、現在アクセスできるコンテキスト (上記の例では、これは「example」と「handleExample」になります) を、子コンポーネント内で使用する必要がありますが、使用します。

よくやった！それでは次回まで、コーディングを楽しんでください。

最後にもう 1 つ注意してください。このテーマについてさらに詳しく知りたい場合は、useContext の学習とこのブログの執筆中に私が参照した公式ドキュメント リソースを以下に示します。

公式ドキュメント:
https://react.dev/reference/react/createContext

レガシー公式ドキュメント。useContext を理解するのに多少役立ちます:https://legacy.reactjs.org/docs/context.html