【React】useContextの使い方ご紹介。〜 Props渡しの省略が可能に〜

今回の記事はTypeScriptベースのReactプロジェクトでのuseContextの使い方をご紹介する記事です。コンポーネント管理になると必要な値はPropsで渡すのが基本ですが、量や階層によってPropsのバケツリレーになり管理が複雑化します。これを防ぐため、useContextは非常に有用な手段です。初心者にもわかりやすいように記載していくので是非使用できるようになりましょう

TypeScriptのReactプロジェクト作成
useContextの使い方

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

ではuseContextを使用して行きましょう。

useContextの使い方

今回の実装の流れは下記です。

Props渡しするコンポーネントを用意する
useContextを使う
ビルド

Props渡しするコンポーネントを用意する

適当な名前のファイル（コンポーネント名）を決めてファイルを作成します。今回は「Component1」とします。

「src」フォルダに「Component.tsx」を作成します。

export default function Component1() {
  return (
    <label>Component1を表示</label>
  );
}

このコンポーネントを「src/App.tsx」から呼び出すと下記のような記述です。

import Component1 from "./Component1";

export default function App() {

  return (
    <Component1 />
  );
}

ここにPropsを入れると下記のように2ファイルを書き換えます。

type Component1Props = {
    test1:string
}

export default function Component1(props:Component1Props) {
  return (
      <div>
        <label>Component1を表示</label>
        <label>{props.test1}</label>
      </div>
  );
}

import Component1 from "./Component1";

export default function App() {

  return (
    <Component1 test1={'テスト1のProps'} />
  );
}

一旦これでbuildすると画面UIはさておき、Propsが受け渡されているのが確認できるはずです。ではいよいよこちらにuseContextを実装していきます。

useContextを定義

親階層にあたる「src/App.tsx」を下記のように記述します。

import Component1 from "./Component1";
import React from 'react';

export const sampleContext = React.createContext('')

export default function App() {

  return (
    <sampleContext.Provider value={'サンプルコンテキスト'}>
        <Component1 />
    </sampleContext.Provider>
    
  );
}

今回は文字列を初期値にしておりますが、オブジェクトも管理できるのでフォーム管理とも相性抜群です。

少し解説をしておくと下記で親から伝播するコンテキストを定義。

export const sampleContext = React.createContext('')

伝播させる範囲は下記なのでプロバイダーの中にコンポーネントを入れればそのコンポーネントではコンテキストで値を取得できるというわけです。


<sampleContext.Provider value={'サンプルコンテキスト'}>
        <Component1 />
    </sampleContext.Provider>

useContextを取得

ではuseContextを受け取る側の記述を記載します。

import {useContext} from 'react'
import { sampleContext } from './App';

export default function Component1() {

    // 受け取るコンテキスト
    const context = useContext(sampleContext)
    
    return (
      <div>
        <label>Component1を表示</label>
        <label>{context}</label>
      </div>
  );
}

少し解説します。

// 受け取るコンテキスト
    const context = useContext(sampleContext)

上記の部分がコンテキストを受け取る部分です。受け取った後は自由に使用できることができます。

では今回の記事は以上です。他にも多数のReact関連の記事を記載しているので是非興味ある型はサイト内みていってください。