useContext는 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할을 합니다. 따라서 useContext에 대해서 다루기 전에 우선 React에서 Context란 무엇인지부터 다뤄야 합니다.

Context란?

React 공식 문서에 쓰여있는 설명에는 “context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.” 라고 적혀있습니다.

<aside> 💡 *일반적인 React 어플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달 되지만, 어플리케이션 안의 여러 컴포넌트들에게 porps를 전달해줘야 하는 경우 context를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것이다.

한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context를 이용해 공유한다.*

</aside>

context API를 사용하기 위해서는 Provider, Consumer, createContext 이렇게 세가지 개념을 알고 있으면 된다.

• createContext : context 객체를 생성한다.
• Provider : 생성한 context 를 하위 컴포넌트에게 전달하는 역할을 한다.
• Consumer : context의 변화를 감시하는 컴포넌트이다.

Context 예제

// App.js
import React, { createContext } from "react";
import Children from "./Children";

// AppContext 객체를 생성한다.
export const AppContext = createContext();

const App = () => {
  const user = {
    name: "Ellie",
    job: "Developer"
  };

  return (
    <>
      <AppContext.Provider value={user}>
        <div>
          <Children />
        </div>
      </AppContext.Provider>
    </>
  );
};

export default App;

// Children.js
import React from "react";
import { AppContext } from "./App";

const Children = () => {
  return (
      <AppContext.Consumer>
        {(user) => (
          <>
            <h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
            <h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
          </>
        )}
      </AppContext.Consumer>
  );
};

export default Children;

이 예제에선 하나의 컴포넌트에서만 context를 사용했지만 코드가 늘어나면 여러 컴포넌트에서 사용이 사능하지만 코드가 점점 더러워지는 문제가 생길 것입니다.

useContext 를 적용

// Children.js
import React, { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  // useContext를 이용해서 따로 불러온다.
  const user = useContext(AppContext);
  return (
    <>
      <h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
      <h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
    </>
  );
};

export default Children;