【useContext編】React hooksをイチから理解しよう

2022 8/14

2022年8月14日

本記事の想定読者

useContextとは何か
useContextの使い方

本記事は上記の悩みを解決したい方向けに執筆しています。

useContextはfirebaseでログインデータを受け渡す際に多用しますので、早めに覚えておきましょう。

2021年5月24日執筆

本記事は常に最新の情報を掲載しております。

本記事の概要

本記事ではuseContextの使い方について詳しく解説しています。

記事の内容

useContextとは

useContextとは、Reactが持つContextという機能をシンプルに扱えるようにしたReact hooksの一つです。

親コンポーネントからpropsデータなどが送られずに、Contextを活用してよりシンプルにデータにアクセスできるフックです。

従来のデータ受け渡し
親要素→子要素→孫要素→ひ孫要素

useContextのデータ受け渡し
親要素→ひ孫要素

このようにuseContextを活用することでデータの受け渡しがスムーズになるのです。

【React hooks】useContextの使い方

useContextの使い方は下記のとおりです。

propsを再確認しよう
useContextでデータを受け渡ししよう

useContextを使う前に：propsを再確認しよう

useContextの使い方の前に、従来のデータ受け渡しを復習しましょう。

今回用意するファイル

App.js
componentsフォルダ
-componenta.js
-componentb.js
-componentc.js

このようなファイルで行っていきます

//App.js
import React from 'react';
import './App.css';
import ComponentA from "./components/componenta";
 
function App(){
 
 return (
   <div className="App">
     <h2>当サイトでuseContextを学ぼう</h2>
     <ComponentA />
   </div>
 )
}
 
export default App;

App.jsではcomponenta.jsにデータ受け渡しを行っています

特に難しい記述はないので次に移ります。

//componenta.js
import React from 'react';
import ComponentB from '../components/componentb';
 
function ComponentA() {
 return (
   <div>
     <h3>子供のコンポーネント</h3>
     <ComponentB />
   </div>
 )
}
 
export default ComponentA;

componenta.jsの中では、componentb.jsにデータを受け渡す記述を書きます。

//componentb.js
import React from 'react';
import ComponentC from '../components/componentc';
 
function ComponentB(){
 return(
   <div>
     <h3>孫のコンポーネントです</h3>
     <ComponentC />
   </div>
 )
}
 
export default ComponentB;

componentb.jsではcomponentc.jsにデータを受け渡します

//componentc.js
import React from 'react';
 
function ComponentC(){
 return(
   <div>
     <h3>ひ孫コンポーネント</h3>
   </div>
 )
}
 
export default ComponentC;

&nbspcomponentc.jsでは特に何もしません。

ここまでのコードをファイルに追加し【npm start】をターミナルに打ち込むと下記のような画面になるはずです。

App.js→componenta.js→componentb.js→componentc.js

この流れでデータが受け渡されています。

この時に、App.jsからcomponentc.jsにpropsや色々なデータを渡す際にはcomponentbやcomponentcを通過しなくていけないため、コードが複雑化しやすくなります

その問題を解決してくれるのが、今回紹介するuseContextというわけです

useContextでデータを受け渡ししよう

App.jsに下記のコードを追加してください。

app.js
import React from 'react';
import './App.css';
import ComponentA from "./components/componenta";
 
export const Count = React.createContext()
 
function App(){
 return (
   <div className="App">
     <h2>当サイトでuseContextを学ぼう</h2>
     <Count.Provider value={1}>
     <ComponentA />
     </Count.Provider>
   </div>
 )
}
 
export default App;

まずはReact.createContext()で変数Countを作成します。

その後、親要素に<変数名.Provider value=値>を追加しましょう。

今回は、変数名にCount、値に1を設定しています

//componentc.js
import React from 'react';
import {useContext} from "react";
import {Count} from "../App";
 
function ComponentC(){
 const count = useContext(Count);
 return(
   <div>
     <h3>ひ孫コンポーネント</h3>
     <h3>{count}</h3>
   </div>
 )
}
 
export default ComponentC;

componentc.jsに、2つほどimportするものがあります

useContext、親要素で追加した変数名(今回はCount)

その後、関数内にuseContextを活用して親要素で指定したデータを新しい変数に代入しましょう。

最後に、表示したいデータをJSX内で表示させれば、下記のような画面になるはずです。