useContextの使い方。値渡しが簡単になる[Reactの学習]

初心者さん

ReactのuseContextの使い方を知りたい。どんな時に使うのかな？

このような疑問をお持ちの方に向けて書いています。

useContextを使うと親コンポーネントから孫コンポーネントへのデータの受け渡しが簡単になります。

Propsで親 -> 子 -> 孫と値を渡す方法よりもシンプルなコードになるため、ぜひ使い方を覚えておくことをおすすめします。

▼この記事では、useContextについて以下の点を理解できるように解説していきます。

useContextとは

ReactのuseContextにはどんな特徴や利用するメリットがあるのか紹介していきます。

useContextはどんな機能？

冒頭でも紹介したようにuseContextは、親から子、孫への値渡しをする場合にコードをシンプルにすることができます。

Propsを使った場合は、上の図の左側のように値を順に渡す必要があります。useContextを使うと値を使用しない子を通さないで値を渡すことが可能になります。

useContextの特徴

簡単にまとめると、以下のような特徴があります。

useContextの使い方

実際にuseContextを使ってみます。

useContextの基本構文

createContextをインポートしておきます。createContextを使い初期化します。Providerを使い、共有したい値をvalueにセットします。

import React, { useState, createContext } from 'react';

const UserCount = createContext()

<UserCount.Provider value={値}>

useContextを使ってみる

親コンポーネントでは、useContextを利用する設定、準備、値のセットを行う。孫コンポーネント（値を共有するコンポーネント）では、値を受け取ります。

親コンポーネント

const UserCount = createContext()
// createContext()で初期化

<UserCount.Provider value={100}>
// Providerを使い値をセット

孫コンポーネント

import { UserCount } from '../親コンポーネント'

const count = useContext(UserCount)
// useContext(UserCount)を使い孫コンポーネントで値を受け取る

useContextが便利な理由

useStateで管理している値をuseContextに渡すことで、他のコンポーネントで値を共有することができます。

useReducerと組み合わせて利用することで、reducerを他のコンポーネントでも利用することができます。

useContextはuseStateやuseReducerと組み合わせて使うと、よりReact Hooksが便利だと実感することができると思います。

useContextの使い方まとめ

今回は、ReactのuseContextの使い方について紹介しました。

親コンポーネントの値を孫コンポーネントと共有する場合、useContextは簡単に使うことができるため有効です。

他のReact Hooksと合わせて使ってみてください。