React useContext

ReactのuseContextはコンポーネント間でのデータの受け渡しに関するHookです。useStateやuseReduceと合わせて利用することができます。まず本書では最も基本的なuseContextの使用方法について説明を行いその後にuseStateとuseReducerを使った利用方法を別々に説明します。本文書を読み終えるとuseContextがどのようなものかを理解することができます。 通常親コンポーネントから子コンポーネントにデータを渡す際は、propsを介して行います。しかし親から子、そのまた子といったように複数のコンポーネントを介してデータを渡すのはpropsでは煩雑になってきます。 ReactのContext APIを利用することでpropsを利用することなく下の階層のコンポーネントとデータの共有を行うことができます。propsに比べて覚えなければいけないことがいくつかあるので慣れるまではすべて暗記しようとせず実際に利用しないといけない時に本文書を読み直して復習してください。 App.jsファイルを一番親のコンポーネントとして、App.jsファイルに子コンポーネントAをimportし、コンポーネントAにコンポーネントB、コンポーネントBにコンポーネントCをimportした4階層のコンポーネントを作成します。 一番上の親コンポーネントであるApp.jsのファイルの中身は下記のようになります。ComponentA、B、Cについてはcomponentsディレクトリの下に作成していきます。 import React from 'react'; import ComponentA from './components/ComponentA' function App() { return ( Learn useContext ); } export default App; ComponentA import React from 'react' import ComponentB from './ComponentB' const ComponentA = () => { return ( Componet A ) } export default ComponentA