【React.js】React hookを理解する！ ~ useContext編 ~

2023 2/06

2023年2月6日

Tomoki

React hookとは..?

React hookはReact16.8から追加された機能で、クラスコンポーネントでしか使用できなかったstateなどのReactの機能を関数コンポーネントで使用できる機能です。

公式ページは以下です。

useContextとは…?

useContext()はReactのrootコンポーネントにぶら下がるツリー全体で使用できるグローバルなデータを簡単に使用できるような機能を提供しています。

useContext()のイメージ図を以下に示します。

上記のイメージ図のように、useContext()が出る前は、バケツリレーの形でcontextをpropsとして渡していました。

しかし、useContext()を使用することで、contextの値に直接アクセスできるためコードも複雑にならず、パフォーマンスも向上します。

使い方

createContext()でコンテキストオブジェクトを生成します。
Providerを用いて、内部のコンポーネントにcontextを渡せるようにし、valueにcontextとしてグローバルに使用するデータを指定する。
- <コンテキストオブジェクト.Provider value={ context値 }>

export const SampleContext = createContext();

const [sampleContext, setSampleContext] = useState('★★useContextの値です★★');

<SampleContext.Provider value={ sampleContext }>
    <Parent />
</SampleContext.Provider>

contextを使用する側で、useContext()の引数にコンテキストオブジェクトを渡します。
useContext()の戻り値をjsx内で使用します。

const 関数コンポーネント = () => {
    // useContextの引数にコンテキストオブジェクトを渡す。
    const context = useContext(コンテキストオブジェクト);

    return (
        // contextの値を画面に出力する。
        <p>{ context }</p>
    )
}

実際にコードで書いてみました。

例として、親コンポーネント、子コンポーネント、孫コンポーネントを用意し、孫コンポーネントでcontextの値を直接使用するようにしてみました。

Childコンポーネントを使用する。

import React from 'react';
// Childをimportする。
import { Child } from './index';

const Parent = () => {
    return (
        <>
            <Child />
            <div className='line'></div>
        </>
    )
}

export default Parent

Grandchildコンポーネントを使用する。

import React from 'react';
// Grandchildをimportする。
import { Grandchild } from './index';

const Child = () => {
    return (
        <Grandchild />
    )
}

export default Child

GrandchildコンポーネントでSampleContextにアクセスする。

import React, { useContext } from 'react';
import { SampleContext } from '../App';

const Grandchild = () => {
    // useContextの引数にApp.jsxで定義したSampleContextを渡す。
    const context = useContext(SampleContext);

    return (
        // contextの値を画面に出力する。
        <p>{ context }</p>
    )
}

export default Grandchild

contextとしてsampleContextである’★★useContextの値です★★’を定義する。

import React, { createContext, useState } from 'react';
import { Parent } from './components/index';

//createContextで、SapmleContextを作成する。
export const SampleContext = createContext();

function App() {
const [sampleContext, setSampleContext] = useState('★★useContextの値です★★');

  return (
    <div>
      <p>useContextのサンプルです</p>
      <SampleContext.Provider value={ sampleContext }>
        <Parent />
      </SampleContext.Provider>
    </div>
  );
}

export default App;