😽
useContextについて（react）
Context とは
コンテキストにより、コンポーネントはその下のツリー全体に情報を提供できます。
- コンテキストを作成する
- コンテキストプロバイダーに値を渡す
- useContext フックを使ってデータを取得する
いつ Context を使うべきか
- テーマ: アプリでユーザーが外観を変更できる場合 (ダーク モードなど)、アプリの上部にコンテキスト プロバイダーを配置し、視覚的な外観を調整する必要があるコンポーネントでそのコンテキストを使用できます。
- アカウント: 多くのコンポーネントは、現在ログインしているユーザーを知る必要がある場合があります。 コンテキストに入れると、ツリーのどこにいても読みやすくなります。 一部のアプリでは、同時に複数のアカウントを操作することもできます (たとえば、別のユーザーとしてコメントを残すため)。 そのような場合、UI の一部を別の現在のアカウント値を持つネストされたプロバイダーにラップすると便利な場合があります。
- ルーティング: ほとんどのルーティング ソリューションは、コンテキストを内部的に使用して現在のルートを保持します。 これは、すべてのリンクがアクティブかどうかを「認識する」方法です。 独自のルーターを構築する場合は、それも行いたいと思うかもしれません。
- 状態の管理: アプリが成長するにつれて、多くの状態がアプリの上部に近くなる可能性があります。 以下の多くの離れたコンポーネントは、それを変更したい場合があります。 レデューサーをコンテキストと一緒に使用して、複雑な状態を管理し、それほど手間をかけずに離れたコンポーネントに渡すのが一般的です。
実演
1. コンテキストを作成する
import { createContext } from "react";
export const LevelContext = createContext(1);
LevelContext は Provider コンポーネントと Consumer コンポーネントを持ったオブジェクトです。
2. コンテキストプロバイダーに値を渡す
import { LevelContext } from "./LevelContext.js";
export default function Section({ level, children }) {
return (
<section className="section">
<LevelContext.Provider value={level}>{children}</LevelContext.Provider>
</section>
);
}
これでSectionコンポーネントで包んだ中身に level 変数が扱えるようになった。
3. useContext フックを使ってデータを取得する
import { useContext } from "react";
import { LevelContext } from "./LevelContext.js";
export default function Heading({ children }) {
const level = useContext(LevelContext);
switch (level) {
case 1:
return <h1>{children}</h1>;
case 2:
return <h2>{children}</h2>;
case 3:
return <h3>{children}</h3>;
case 4:
return <h4>{children}</h4>;
case 5:
return <h5>{children}</h5>;
case 6:
return <h6>{children}</h6>;
default:
throw Error("Unknown level: " + level);
}
}
上記の下記の箇所がプロバイダーに渡した値を呼び出している箇所になります。
useContextを使って LevelContext からプロバイダーに渡した値の level を呼び出しています。
Discussion