目次
はじめに
ReactのuseContextフックは、コンポーネント間でデータを共有するための強力なツールです。本記事では、useContextの基本的な使い方から実践的な応用までを詳しく解説します。
useContextとは？
useContextはReactのフックの一つで、コンテクストAPIと組み合わせて使用されます。コンテクストAPIは、Reactアプリケーション全体でグローバルな状態を管理するための仕組みです。useContextを使用することで、コンポーネントツリーの深くにあるコンポーネントでも、親コンポーネントからのプロップスを介さずにデータにアクセスできます。
useContextの基本的な使い方
まずは、useContextの基本的な使い方を見てみましょう。
1. コンテクストの作成
最初に、コンテクストを作成します。これには、React.createContext関数を使用します。
import React, { createContext } from 'react';
const MyContext = createContext();2. コンテクストプロバイダーの設定
次に、コンテクストプロバイダーを設定します。プロバイダーは、ツリー内のすべてのコンポーネントにデータを提供します。
import React from 'react';
import ReactDOM from 'react-dom';
const MyContext = createContext();
const App = () => {
return (
<MyContext.Provider value="Hello, World!">
<ChildComponent />
</MyContext.Provider>
);
};
const ChildComponent = () => {
return <GrandChildComponent />;
};
const GrandChildComponent = () => {
return <DeepComponent />;
};
const DeepComponent = () => {
const value = React.useContext(MyContext);
return <div>{value}</div>;
};
ReactDOM.render(<App />, document.getElementById('root'));3. useContextフックの使用
コンテクストの値にアクセスするためには、useContextフックを使用します。
import React, { useContext } from 'react';
const DeepComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>;
};これで、DeepComponentはプロバイダーで提供された値にアクセスできます。
実践的な例: テーマ切り替え
次に、useContextを使用してテーマの切り替え機能を実装してみましょう。
1. テーマコンテクストの作成
import React, { createContext, useState } from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};2. テーマコンテクストの使用
import React, { useContext } from 'react';
const ThemeButton = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme} style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
Toggle Theme
</button>
);
};
const App = () => {
return (
<ThemeProvider>
<ThemeButton />
</ThemeProvider>
);
};
export default App;
この例では、ThemeButtonコンポーネントがテーマの切り替え機能を持ち、ボタンをクリックすることでテーマを変更できます。
まとめ
ReactのuseContextフックは、コンポーネント間でデータを簡単に共有するための便利なツールです。基本的な使い方から応用的な使い方まで理解することで、より効率的なReactアプリケーションを構築できるようになります。この記事を参考にして、useContextを使いこなしましょう。
コメント