1.はじめに

この記事ではReactのuseContextについて解説します。

Reactを使っているとコンポーネント間の値の受け渡しが複雑になって管理が大変っていう人多いのではないでしょうか？
その問題を解決するのが今回解説するuseContextです。

このuseContextを使うと冗長なコードがなくなり見通しがよくなるので是非最後まで読んでください

2.useContextのメリット

まず、useContextとは何なのでしょうか？
コンポーネント間で受け渡しができるフック関数です。
最大のメリットは明示的にプロパティの受け渡しを書かなくていい点で、簡潔なコードをかけるようになります。

2-1.プロパティ引き継ぎ問題

従来のプロパティの引き継ぎは冗長な記述が多くなる問題がありました。
クラスコンポーネントを使って何層も下のコンポーネントにプロパティを引き継ぐとなると
間のコンポーネントではプロパティを使ってなくても引き継ぐ必要があります。

例えば、次のコードは親→子→孫の順番で呼び出しており、親で設定した値を孫で使っています。

親→子→孫にプロパティを引き継ぐ

//親コンポーネント
class Parent extends React.Component {
  render() {
    return (
      <div>
        <div>親</div>
        <Child value="Qiita"></Child>
      </div>
    );
  }
}

//子コンポーネント
class Child extends React.Component {
  render() {
    return (
      <div>
        <div>子</div>
        {/* 子コンポーネントで使わないが値を引き継ぐ */}
        <Grandchild value={this.props.value} ></Grandchild>
      </div>);
  }
}

//孫コンポーネント
class Grandchild extends React.Component {
  render() {
 return (
      <div>
        <div>孫</div>
        <div>親から孫に渡った値：{this.props.value} </div>
      </div>);
  }
}

このように中間の子コンポーネントはプロパティを使っておらず、引き継ぐ処理が冗長なコードになってしまっています。
useContextを使えば親で設定した値を明示的に引き渡すことなく、孫で使うことができます。

3.useContextの使い方

それでは具体的にuseContextを使っていきましょう。
次の4ステップで実装できます

コンテキストの作成
有効範囲の指定
必要なモジュールのインポート
コンテキストの値を取得

1,2は親コンポーネントの設定で
3,4は孫コンポーネントの設定になっています。

まずは具体的なソースを見ていきましょう。

親コンポーネント

import React from 'react';
import Child from './Child'

// ①コンテキストの作成
export const Context = React.createContext();

//親コンポーネント
function Parent() {
  return (
      <div>
        <div>親</div>
        {/* ②有効範囲の指定 */}
        <Context.Provider value="Qiita">
          <Child />
        </Context.Provider>
      </div>
    );
}

export default Parent;

子コンポーネント

import React from 'react'
import Grandchild from './Grandchild'

//子コンポーネント
function Child() {
    return (
      <div>
        <div>子</div>
        <Grandchild />
      </div>);
}

export default Child

孫コンポーネント

// ③必要なモジュールのインポート
import React,{useContext} from 'react'
import { Context } from './Parent'

function Grandchild() {
    // ④コンテキストの値を取得
    const value = useContext(Context)
    return (
      <div>
        <div>孫</div>
        <div>親から孫に渡った値：{value} </div>
      </div>);
}

export default Grandchild

3-1.コンテキストの作成

まずはじめにcreateContextメソッドを使ってコンテキストを作ります。
コンテキストを作ることで明示的にプロパティを引き渡すことなく、コンポーネント間で受け渡しが可能です。
ちなみにコンテキストをexportしているのは孫コンポーネントに渡すためです

コンテキストの値の作成

export const Context = React.createContext();

3-2.有効範囲の指定

コンテキスト名.Providerタグでコンテキストを受け渡したいコンポーネントを括ります。
Providerタグの中身がコンテキストの有効範囲になり、value属性で指定した値がコンテキストで引き渡す値です。

有効範囲の指定

<Context.Provider value="Qiita">
  <Child />
</Context.Provider>

3-3.必要なモジュールのインポート

ここからは孫コンポーネントの設定です。
useContextはコンテキストを取得するメソッドで、親コンポーネントのコンテキストに受け渡したい値のキーが入っています。
この2つをインポートして親からのコンテキストを取得します。

必要なモジュールのインポート

import React,{useContext} from 'react'
import { Context } from './Parent'

3-4.コンテキストの値を取得

最後にインポートしたuseContextメソッドと親で設定したコンテキストで値を取得します。

コンテキストの値を取得

const value = useContext(Context)

4.まとめ

この記事ではuseContextのメリットやどのように使うのかを解説していきました。
まとめると次の3つになります。

useContextは明示的にプロパティを渡さなくてもコンポーネント間で受け渡しができる
createContextでコンテキストを作成する
useContextでコンテキストを取得する

ReactのuseContextを使いたいあなたに！たった4ステップで使う方法