【React Hooks】useContextについて徹底解説！！

はじめに
今回作るもの
useContextの構文
実装例
終わりに

はじめに

この記事で分かること

useContextの概要と使い方

ぴんくうさぎ

Rectを勉強し始めたのだけど、

useContextがよくわからない！！

みどりがめ

useContextは値をグローバルに使用したいときに使用するよ！

今回はuseContextについて詳しく学んでいこう！！

今回作るもの

「taro」の表示をuseContextを使って作成しています。グローバルにどこからでも参照可能です。

useContextの構文

useContextを使用することで、グローバルにデータを管理することができるようになります。

これにより、コンポーネント間のpropsバケツリレーをしなくてもContext内に収容されているデータにアクセスできるようになります。

useContextを使用してグローバルな値管理を行うまでは大きく３ステップです。
日本語で書くと以下のようになります。

//① コンテキストの作成
const コンテキスト名 = createContext();

// ②コンテキストを使用するコンポーネントを定数名.Providerで囲む
<定数名.Provider value={コンテキストに格納する値}>
   <コンポーネント />
</定数名.Provider>

// ③コンテキストから値を取り出す
const コンポーネント = () => {
const 定数名　= useContext（Contextオブジェクト）
}

実装例

具体的な実装例を見ていきましょう。

ユーザーデータを保持するContextを作成します。

type User = {
  id: number;
  name: string;
};
// ユーザーデータを保持するコンテキストを作成する
const userContext = createContext<User | null>(null);

Parentクラスで作成したCOntextに値を渡します。

const Child = () => {
  return <GrandChild />;
};

export const Parent = () => {
  const user: User = {
    id: 1,
    name: "taro"
  };
  return (
    <userContext.Provider value={user}>
      <Child />
    </userContext.Provider>
  );
};

GrandChildクラスでContextから値を取り出しています。

const GrandChild = () => {
  const user = useContext(userContext);
  return <p>こんにちは！{user.name}さん</p>;
};

index.tsxでParentを表示します。

import React from "react";
import ReactDOM from "react-dom/client";
import { Parent } from "./components/ContextSample";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Parent />
  </React.StrictMode>
);