【React】Contextを使おう

  • Contextとは

値を子に渡せる仕組みの一つ。
プロパティと違い、Contextが提供されているコンポーネントであれば
どのコンポーネントからでも使用可能。

※例はTypeScriptを用いた例です。

  • createContext

コンテキストを作成する。 <>の中には型。引数には

export const ABContext = createContext<string>("");
  • Provider

プロバイダを用いて、子要素にContextを渡す。

<ABCContext.Provider value={"子要素に渡す値"}>
  // Contextを使う子要素
  {children}
</ABContext.Provider>
  • useContext

コンテキストの値を使う。

const value = useContext(ABContext);
console.log(value); // 子要素に渡す値
  • 使いどころ

useStateをContextで子要素に渡して状態管理したりするととても便利。