React 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.

useContext 이전의 Context 사용 방식

---

App 컴포넌트에서 관리하는 prop usernam을 컴포넌트 A - B - C (nested) 중 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가 하나일 때는 문제 없이 Context API를 사용할 수 있다.

문제

---

Context API로 여러 개의 value를 전달해야 하는 경우에 코드는 복잡해진다.

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

네스팅으로 인해 코드의 가독성이 매우 저하된다. useContext 훅은 이를 해결한다.

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컴포넌트에서 useContext로 Context value를 사용해본다.

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