React Hooks useContextの使い方

React_usecontext

こんにちは、ミナトです。

今回はReact HooksのuseContextについて解説します。

useContextとは?

Reactでは、親コンポーネントから子コンポーネント、子コンポーネントから孫コンポーネントへ値を渡す際にpropsをバケツリレーのように親から子、子から孫へと順番に渡す必要がありました。

階層が深くなるにつれ、このバケツリレーを延々と繰り返さないといけないというこの課題をprop drilling問題といいます。

useContextを利用すると親から渡された値を孫やそのさらに下の階層のコンポーネントで直接取得できるようになります。

例えばA、B、Cという階層になっていた場合、従来はA > B > Cと順番にpropsを渡す必要がありましたが、useContextを利用するとAからCへ直接値を渡すことができます。(Bを経由しなくてすむ)

説明だけだと分かりにくいと思いますので、以下useContextを利用した実装例で説明します。

useContextの使用例

React Appの作成

まずはReactのアプリを新規作成します。作成方法については以下の記事を参考にしてください。

react_usestate

React Hooks useStateの使い方

2021年8月21日

コンポーネントの定義

まずは、contextを格納するディレクトリを作成します。(my-app/src/contexts

my-app/src/contexts の中にAppContexts.jsを作成します。

import { createContext } from 'react';

const AppContext = createContext();

export default AppContext;

contextはcreateContext()を利用して定義します。定義したcontextは他のコンポーネントからimportできるようにexportしています。

続いて、componetを格納するディレクトリを作成します。my-app/src/components/use_context

my-app/src/components/use_context の中にB.jsを作成します。

Bコンポーネント(子)ではCコンポーネント(孫)を表示しています。

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

const B = () => {
  return (
    <div>
      <h2>B Component</h2>
      <C />
    </div>
  );
};

export default B;

続いて、 my-app/src/components/use_context の中にC.jsを作成します。

Cコンポーネントでは、先ほど作成したAppContextとReact HooksのuseContextをインポートしています。

useContextの引数には利用するContextオブジェクトを指定します。useContext(Contextオブジェクト)

こうすることで、このあと定義するApp.jsのProviderに渡されたvalueを孫のCで受け取ることができます。

import React, {useContext} from 'react';
import AppContext from '../../contexts/AppContext';

const C = () => {
  const value = useContext(AppContext);

  return (
    <div>
      <h2>C Component</h2>
      <p>{value}</p>
    </div>
  );
};

export default C;

最後にApp.jsを修正して、Contextに値を渡します。

コンポーネントの外側を<AppContext.Provider value={'value from App.js'}>で囲っていることに着目してください。

<Context.Provider>で囲われている要素の中では、useContextを利用することでvalueの値を直接取得できます。

import './App.css';
import AppContext from './contexts/AppContext';
import B from './components/use_context/B';

function App() {
  return (
    <AppContext.Provider value={'value from App.js'}>
      <div className="App">
        <header className="App-header">
          <B />
        </header>
      </div>
    </AppContext.Provider>
  );
}

export default App;

まとめ

まとめ
  • useContextを利用すると親から孫コンポーネントへ直接値を渡せる(prop drilling問題が解決する)
  • useContextでContextを受け取るには、親を<Context.Provider>で囲う
  • 親の値を利用するコンポーネントではuseContext(コンテキスト)を利用して値を取得する

最後まで読んでいただき、ありがとうございます。

この記事が、「面白いな」、「勉強になったな」という方は、SNSでシェアしていただけると嬉しいです。

react_usestate

React Hooks useStateの使い方

2021年8月21日
React_useeffect

React Hooks useEffectの使い方

2021年8月23日