はじめに

親コンポーネントの定義した値を、子/孫コンポーネントで使いたい場合、createContext と useContext を利用します。createContext と useContext は、React の Context API を使ってコンポーネント間で状態を共有するための機能です。主に グローバルな状態管理やプロップスのバケツリレーを防ぐ 目的で使用します。

基本的な使い方

最も基本的な使い方について、以下の構成で説明します。

├ Oya.tsx
├ components/
　　　├ Ko.tsx
　　　├ Mago.tsx

1.親コンポーネント（Oya.tsx）で「createContext」の初期値を定義

import { createContext } from "react";

// Context の作成（初期値を設定）※値は変更不可
const MyContext = createContext("hoge");

2.子/孫コンポーネント（Ko.tsx/Mago.tsx）において「createContext」で定義した値を「useContext」を使用して呼び出し

import { useContext } from "react";
import { MyContext } from "../Oya";

// 「MyContext」の値を呼び出す
const MyContext = useContext(MyContext);

モジュール化して利用する使い方

モジュール化した「createContext」の使い方について、以下の構成で説明します。

├ Oya.tsx
├ components/
　　　├ Context.tsx
　　　├ Ko.tsx
　　　├ Mago.tsx

１.「Context.tsx」で初期値を定義

import { createContext } from "react";

export const ContextNumber = createContext(1);

2.親コンポーネント（Oya.tsx）にて「Context.tsx」で定義した値をimportし、値を譲渡

import { ContextNumber } from "./components/Context";

export default function GroupPage() {

 return(
     //動的な値を譲渡できる！！
      
   
 );
}

３.子/孫コンポーネント（Ko.tsx/Mago.tsx）において「Provider」で譲渡された値を「useContext」を使用して呼び出し

import { ContextNumber } from "@/app/components/Context";

export default function Ko() {

 const value: number = useContext(ContextNumber); 　// 値を取得

 return(
   
{value}
 );
}

複数種類のページがある場合、そのページごとに異なる値を渡したいときに利用すると便利です。

例えば、通常の一覧ページとカテゴリ一覧ページでそれぞれ「”common”」と「”category”」を「Provider」で譲渡する場合、子コンポーネントでは取得した値を基に処理を展開することで、同じ子コンポーネントを共有することができます。

Let's share!