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

##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でデータ共有]
(https://reffect.co.jp/react/react-usecontext-understanding)
[React hooksを基礎から理解する (useContext編)]
(https://qiita.com/seira/items/fccdf4e73c59c491558d)