ReactのContextは、コンポーネント間でデータを共有するための仕組みです。Contextを使うことで、プロパティを親から子に渡す必要がなくなり、コンポーネントのネストを浅くすることができます。この記事ではContextの使い方や実装例を紹介します。
Contextの使い方
Contextを使ってデータを共有するためには、以下のステップが必要です。
- Contextを作成する
createContextでContextを作成します。引数にはContext内で使用する値のデフォルト値を設定します。
|
1 2 3 |
import { createContext } from 'react'; const MyContext = createContext(defaultValue); |
- Contextを提供する
Contextを提供したいコンポーネントを<MyContext.provider>で囲むことで。それより内側のコンポーネント内でContextで設定されている値が共有されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { MyContext } from './MyContext'; function App() { const data = 'Hello, World!'; return ( <MyContext.Provider value={data}> <Child /> </MyContext.Provider> ); } |
- Contextを消費する
Contextで設定した値を取得(消費)するにはuseContextフックを使用します。以下の例ではMyContextからdataを取得しています。
|
1 2 3 4 5 6 7 8 |
import { useContext } from 'react'; import { MyContext } from './MyContext'; function Child() { const data = useContext(MyContext); return <div>{data}</div>; } |
このように、Contextを使うことで、親のコンポーネントから値を渡すことなく、子のコンポーネントにデータを渡し消費させることができます。
Contextを使った実装例
例としてテーマの変更などアプリ全体で共通する設定を管理する場合にContextを使うことができます。
ThemeContextを作成
createContext関数を使用して、ThemeContextを定義しています。初期値として、lightを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import {useContext} from "react" import ThemeContext from "../context/ThemeContext" const Child = () => { const theme = useContext(ThemeContext) const style = { background: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw', fontSize: '24px', fontWeight: 'bold' } return ( <div style={style}> Current Theme: {theme} </div> ) } export default Child |
AppコンポーネントにThemeContextを提供
AppコンポーネントではThemeContext.Providerコンポーネントを使って、アプリ全体で使用するthemeステートの値をThemeContextに提供しています。
また、useStateフックを使用して、themeステートを管理します。toggleTheme関数を定義し、themeステートを'light'と'dark'のいずれかに切り替えるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import './App.css'; import ThemeContext from './context/ThemeContext'; import {useState} from 'react'; import Child from './components/Child'; function App() { const [theme, setTheme] = useState('light'); const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light') } return ( <div className="App"> <ThemeContext.Provider value={theme}> <button onClick={toggleTheme}>Toggle Theme</button> <Child /> </ThemeContext.Provider> </div> ); } export default App; |
ChildコンポーネントでThemeContextを消費
useContextフックを使用して、ThemeContextから現在のテーマを取得し、それに応じてスタイルを適用するようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import {useContext} from "react" import ThemeContext from "../context/ThemeContext" const Child = () => { const theme = useContext(ThemeContext) const style = { background: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw', fontSize: '24px', fontWeight: 'bold' } return ( <div style={style}> Current Theme: {theme} </div> ) } export default Child |
まとめ
本記事ではReactでContextを使用する3つの手順を説明しました。
createContext関数を使用して、Contextを定義する。Context.Providerコンポーネントを使って、Contextを提供する。useContextフックを使用して、Contextの値を消費する。