Reactを基本からまとめてみた【15】【React Hook (useContext) ② 】

7050 ワード
useContext React ReactHook React テキストリンク

useContextとは

useContextとは、Context機能をよりシンプルに使えるようになった機能。
親からPropsで渡されていないのに、Contextに収容されているデータへよりシンプルにアクセスできるというもの。

通常、親コンポーネントから子コンポーネントにデータを渡す際は、propsを介して行うが、親から子、そのまた子といったように複数のコンポーネントを介してデータを渡すのはpropsでは煩雑になってくる。

ReactのContext APIを利用することでpropsを利用することなく、下の階層のコンポーネントとデータの共有を行うことができる。

使用例 『UseContext』

App.jsファイルを一番親のコンポーネントとして、App.jsファイルに子コンポーネントAをimportし、コンポーネントAにコンポーネントB、コンポーネントBにコンポーネントCをimportした4階層のコンポーネントを作成する。

一番上の親コンポーネントであるApp.jsのファイルの中身は下記のようになり、ComponentA、B、Cについてはcomponentsディレクトリの下に作成する。

App.js
import React from 'react';
import ComponentA from './components/ComponentA'

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Learn useContext</h1>
      <ComponentA/>
    </div>
  );
}
export default App;
ComponentA.js
import React from 'react'
import ComponentB from './ComponentB'

const ComponentA = () => {
    return (
        <div>
            <p>Componet A</p>
            <ComponentB />
        </div>
    )
}
export default ComponentA;
ComponentB.js
import React from 'react'
import ComponentC from './ComponentC'

const ComponentB = () => {
    return (
        <div>
            <p>Componet B</p>
            <ComponentC />
        </div>
    )
}
export default ComponentB;
ComponentC.js
import React from 'react'

const ComponentC = () => {
    return (
        <div>
            <p>Componet C</p>
        </div>
    )
}
export default ComponentC;

参考サイト

こんなに簡単なの？React Hook useContextでデータ共有
React hooksを基礎から理解する (useContext編)