【React hook】useContextを使用してメッセージの切り替え

Reactはコンポーネント間のデータの受け渡しは「props」を使用し、
親から子へというのが基本的な考え方となります。
コンポーネントで共通のデータを参照する際に便利なのが「useContext」です。
今回はuseContextを利用してメッセージの切り替えを実装してみようと思います。

Contextとは
メッセージ切り替え
参考文献

Contextとは

Contextとは、propsで渡さなくてもデータを共有できる機能です。
「グローバル変数」とみなすことができ、各コンポーネントからアクセス可能となります。
コンポーネントの階層が深いときになどデータを渡すのに手間がかかりません

useContextとは、Contextのhook版になります。
※hook：Reactの機能をクラスを書かずに使用できるようにしたもの

メッセージ切り替え

３つのコンポーネントを用意して、メッセージの切り替えができるようにします。

文字変更ボタン押下↓

では実際のソースを記載していきます。

App.js

import React, {createContext, useState} from 'react'
import Header from './component/Header'
import Footer from './component/Footer'
import Content from './component/Content'

export const ChangeContext = React.createContext();

function App() {
  const [chageContext, setChangeContext] = useState(true);
  const value = {
    chageContext, setChangeContext
  };
  return (
    <div className="App">
      <ChangeContext.Provider value = {value}>
        <Header />
        <Content />
        <Footer />
      </ChangeContext.Provider>
    </div>
  );
}

export default App;

★ポイント
①export const ChangeContext = React.createContext();
　　コンテクストオブジェクトを作成します。
②const [chageContext, setChangeContext] = useState(true);
　　useStateを利用することで、各コンポーネントからコンテキストの値を更新できます。
③<ChangeContext.Provider value = {value}>
　　Provider内のコンポーネントはコンテキストを受け取るが可能になります。
　　valueにuseStateで生成した値、関数を渡しています。

続いて子コンポーネントのを記載をします。

Header.js

import React, {useContext, useState} from 'react';
import {ChangeContext} from '../App';
import style from '../style/header.module.scss';

const Header = () => {
  const {chageContext, _} = useContext(ChangeContext);

  return(
    <header className={style.header}>
      <div>
        <h1>
          {chageContext ? 'header': 'ヘッダー'}
        </h1>
      </div>
    </header>
  )
}

export default Header;

Content.js

import React, {useContext} from 'react';
import {ChangeContext} from '../App';
import style from '../style/content.module.scss';

const Content = () => {
  const {chageContext, setChangeContext} = useContext(ChangeContext);

  return(
    <div className={style.content}>
      <h1>
        {chageContext ? 'content': 'コンテンツ'}
      </h1>
    </div>
  )
}

export default Content;

Footer.js

import React, {useContext} from 'react';
import {ChangeContext} from '../App';
import style from '../style/footer.module.scss';

const Footer = () => {
  const {chageContext, setChangeContext} = useContext(ChangeContext);

  return(
    <footer className={style.footer}>
      <div>
        <h1>
          {chageContext ? 'footer': 'フッター'}
        </h1>
      </div>
      <button onClick={() => setChangeContext(!chageContext)}>文字変更</button>
    </footer>
  )
}

export default Footer;

★ポイント
①const {chageContext, setChangeContext} = useContext(ChangeContext);
　　コンテキストオブジェクトを受け取っています。
　　※<ChangeContext.Provider value = {value}>のvalueに設定した値と同じ形で変数を準備
　　コンテキストオブジェクトを変更する必要のないコンポーネントは_にして
　　使わないことを明示しています。
②{chageContext ? ‘header’: ‘ヘッダー’}
　　三項演算子を利用して表示する文字を分岐しています

このように各コンポーネントで参照できるので便利ですね。