Hooks - useContext

Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

ユーザーContextを使用する前のContext

Appコンポーネントによって管理されるprop 24579142は、コンポーネントA−B−C(ネスト)におけるCが使用する例である.Context APIを使用すると、以前のようにA、Bコンポーネントを介してCからアクセスする必要はありません.
App.js

import React from "react";
import ComponentC from "./ComponentC";

// (1) Create the context
// (3) export the context
export const UserContext = React.createContext();

function App() {
  return (
    <div className="App">
      {/* (2) Provide this C ontext with a value */}
      <UserContext.Provider value={"Lee"}>
        <ComponentC />
      </UserContext.Provider>
    </div>
  );
}

export default App;

ComponentA.js

// prop이 컴포넌트를 거치지 않는다. 
import React from "react";
import ComponentB from "./ComponentB";

function ComponentC() {
  return (
    <div className="App">
      <ComponentE />
    </div>
  );
}

export default ComponentC

ComponentB.js

// prop이 컴포넌트를 거치지 않는다. 
import React from "react";
import ComponentC from "./ComponentC";

function ComponentB() {
  return (
    <div className="App">
      <ComponentC />
    </div>
  );
}

export default ComponentB

ComponentC.js

import React from "react";
// (4) import the Context
import {UserContext} from './App';

function ComponentC() {
  return(
  <div>
    <UserContext.Consumer>
    {user => {
      return <div>User context value: {user}</div>
    }}
    </UserContext.Consumer>
  </div>
  )
}

export default ComponentC

User context value: Lee

上記の例に示すように、Contextが1つしかない場合は、Context APIを使用することができる.

質問する

Context APIを使用して複数の値を渡す必要がある場合、コードは複雑になります.
App.js

import React from "react";
import ComponentC from "./ComponentC";

export const UserContext = React.createContext();
export const ChannelContext = React.createContext(); // Add

function App() {
  return (
    <div className="App">
      <UserContext.Provider value={"Lee"}>
        {/* Add the ChannelContext within UserContext */} 
        <ChannelContext.Provider value={'1'}>
          <ComponentC />
        </ChannelContext.Provider>
      </UserContext.Provider>
    </div>
  );
}

export default App;

ComponentC.js

import React from "react";
// (4) import the Context
import {UserContext, ChannelContext} from './App';

function ComponentC() {
  return(
  <div>
    <UserContext.Consumer>
    {user => {
      return (
        <ChannelContext.Consumer>
          {
            channel => {
              return <div>UserContext value: {user}, ChannelContext value: {channel} </div>
            }
          } 
        </ChannelContext.Consumer>
      ) 
    }}
    </UserContext.Consumer>
  </div>
  )
}

export default ComponentC

UserContext value: Lee, ChannelContext value: Channel 1

ネストされているため、コードの可読性が低い.usernamフックがこの問題を解決した.

useContextの使用

Contextの作成方法は以前と同じです.useContextはContextを作成するのではなく、使いやすいです.
App.js

import React from "react";
import ComponentC from "./ComponentC";

export const UserContext = React.createContext();
export const ChannelContext = React.createContext();

function App() {
  return (
    <div className="App">
      <UserContext.Provider value={"Lee"}>
        <ChannelContext.Provider value={'Channel 1'}>
          <ComponentC />
        </ChannelContext.Provider>
      </UserContext.Provider>
    </div>
  );
}

export default App;

今回はBコンポーネントでContextValueをuseContextとして使用した.
ComponentB.js

// (1) import Context from React
import React, {useContext} from "react";
// (2) import the necessary Context
import {UserContext, ChannelContext} from './App';

function ComponentB() {

  // (3) call the useContext function passing in the Context as its argument.
  const user = useContext(UserContext)
  const channel = useContext(ChannelContext)

  return (
    <div className="App">
      {user} - {channel}
    </div>
  );
}

export default ComponentB

Lee - Channel

🔗 React Hooks Tutorial - 15 - useContext Hook Part 1