おにちゃん塾の商品一覧*準備中

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

【useContext編】React hooksをイチから理解しよう
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • useContextとは何か
  • useContextの使い方

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

おにちゃん

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


2021年5月24日執筆

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


本記事の概要

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

(スポンサーリンク)

目次

useContextとは

useContextとは
useContextとは

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

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

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

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

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


【React hooks】useContextの使い方

【React hooks】useContextの使い方
【React hooks】useContextの使い方

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

  1. propsを再確認しよう
  2. 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内で表示させれば、下記のような画面になるはずです。


まとめ:useContextはfirebaseで活用されます

まとめ:useContextはfirebaseで活用されます
まとめ:useContextはfirebaseで活用されます

ここまでで【useContext編】React hooksをイチから理解しようを解説してきました。

本記事のまとめ
  1. useContextとは、Reactが持つContextという機能をシンプルに扱えるようにしたReact hooksの一つです。
  2. 親コンポーネントからpropsデータなどが送られずに、Contextを活用してよりシンプルにデータにアクセスできるフックです。
おにちゃん

本記事は以上です。最後までご覧下さりありがとうございました。


読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる