こんにちは。KOUKIです。
ReactのuseContextの使い方を学んだので、メモしておきます！
なぜ、useContextが便利なのか
useContextが導入される前は、props drillingという問題が発生していました。
Reactにはpropsという概念があり、これによりコンポーネント間でデータの受け渡しが行えます。
しかし、従来の方法だと、コンポーネントが増えるごとに、propsの受け渡しが複雑になるという問題に直面しました。
例えば、上記の例だとrootコンポーネントに設置された値をBコンポーネントが使うためには、Aコンポーネントを経由する必要があります。
useContextは、この様な煩わしさから解放してくれます。
Aのコンポーネントを経由しなくとも、rootのpropsを直接操作することが可能になるのです。
useContextの実装
以下のプロジェクトを用意しましょう。
|
1 2 3 4 5 6 7 |
src L App.js(root) L components | L A.js | L B.js L contexts L AppContext.js |
AppContextの実装
名前はAppContextでなくとも問題ありませんが、独自コンテキストを用意します。
|
1 2 3 4 5 6 |
// src/contexts/AppContext.js import { createContext } from 'react'; const AppContext = createContext() export default AppContext; |
Appコンポーネント(root)の実装
続いて、App.jsに以下の実装をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// src/App.js import React from 'react'; import AppContext from './contexts/AppContext'; import A from './components/A' function App() { return ( <AppContext.Provider value={"value from app.js"}> <div className="App"> <A /> </div> </AppContext.Provider> ); } export default App; |
先ほど作成したAppContextをインポートし、「AppContext.Provider」にて下位のコンポーネントを囲っています。
そして、受け渡す値(props)をvalueで定義しています。これは、valueという名称でなければなりません。
useContextを使うための事前準備なので、覚えておいてください。
Aコンポーネントの実装
Aコンポーネントは、Bコンポーネントをインポートするだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react' import B from './B' const A = () => { return ( <div> <h3>This is a A</h3> <B /> </div> ) } export default A |
Bコンポーネント
さて、本記事の目的に辿り着きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, {useContext} from 'react' import AppContext from '../contexts/AppContext' const B = () => { const value = useContext(AppContext) return ( <div> <h3>This is a B</h3> { value } </div> ) } export default C |
ここでは、useContextとAppContextインポートし、useContextの引数としてAppContextを渡しています。
これだけでOKです。
動作確認
ブラウザを確認すると、問題なく値が渡されていることがわかります。
おわりに
useContextもなかなか便利そうですね。
Reactを早く習得して、色々なアプリケーションを作成していきたいです。
それでは、また！
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。