- はじめに React HooksのuseContextを学びましょう！useContextフックを使うと、従来のコンテキストコンシューマを使わずにコンテキストの値にアクセスできます。GeekとGalが一緒にuseContextを探検していきましょう。
useContextフックは、コンテキストコンシューマでコンポーネントをラップせずにコンテキストの値にアクセスするのにめっちゃ便利なのよ！
おお、それは便利そうだね！どうやって使うの？
まず、コンテキストが必要になるわ。
React.createContext()
を使って作成できるの。そして、ReactからuseContextフックをインポートして、コンテキストと一緒に使うの。
- コンテキストの作成とuseContextの使用
コンテキストを作成し、useContextを使ってその値にアクセスする例を見てみて：
import React, { useContext } from 'react';
// コンテキストの作成
const ThemeContext = React.createContext('light');
function ThemedButton() {
// useContextを使ってコンテキストの値にアクセス
const theme = useContext(ThemeContext);
return <button className={theme}>私は{theme}ボタンだよ！</button>;
}
つまり、
React.createContext()
でコンテキストを作成して、そのコンテキストとuseContextを使って値を取得するんだね！
その通り！そして、コンポーネント内でコンテキストの値を好きなように使えるのよ！
- コンテキスト値の提供
でもね、コンテキストの値を設定するためには、コンテキストプロバイダがまだ必要になるわ。そのために、コンテキストから
Provider
コンポーネントを使うの！
import React from 'react';
import ThemedButton from './ThemedButton';
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
ああ、コンテキストプロバイダがコンテキストの値を設定し、useContextがコンポーネントでその値にアクセスできるようにするんだね！
バッチリ！useContextを使うと、余分なネストなしで関数コンポーネント内でコンテキストの値にアクセスするのが簡単になるわ！
- おわりに useContextは、関数コンポーネントでのコンテキスト値のアクセスを簡素化する強力なReactフックです。useContextを使うことで、不要なネストを避け、コードをクリーンで効率的にすることができます。useContextで楽しくコーディングしましょう！😃