Context API 3가지 주요 개념

1. React.createContext(defaultValue)
2. Context.Provider
3. Context.Consumer => useContext로 대체가능

1. React.createContext

context 객체를 만들때 사용하는 함수

2. Context.Provider

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할

3. Context.Consumer

context 변화를 구독하는 React 컴포넌트
설정한 값을 불러와야 할 때 사용

해당

예시1 (Consumer 사용)

import React, { createContext } from 'react'

// 0. AppContext 생성
const AppContext = createContext()

const App = () => {
  const user = {
    nickname: 'danuel',
    isAdmin: true
  }

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

// 1. PostsContext 생성
const PostsContext = createContext()

const Posts = () => {
  const posts = [
    {
      title: 'useContext 알아보기',
      content: '이번 편에서는 React Context를 ...'
    }
  ]

  return (
    <PostsContext.Provider value={posts}>
      <Children />
    </PostsContext.Provider>
  )
}

// 2. user와 posts를 가져와 화면에 보여주기
const Children = () => (
  <AppContext.Consumer>
    {user => (
      <PostsContext.Consumer>
        {posts => {
          let label = 'user'
          if (user.isAdmin) {
            label = 'admin'
          }

          return (
            <div>
              <div>{label}</div>
              <div>{user.nickname}</div>
              <div>{posts.map((post, index) => (
                <div key={index}>
                  <div>{post.title}</div>
                  <div>{post.content}</div>
                </div>
              ))}</div>
            </div>
          )
        }}
      </PostsContext.Consumer>
    )}
  </AppContext.Consumer>
)

export default App;

• App의 user와 Posts의 posts를 value로 받아 children에서 Consumer를 통해 처리한다.

예시2 (useContext 사용)

import React, { createContext, useContext } from "react";

// 0. AppContext 생성
const AppContext = createContext();

const App = () => {
  const user = {
    nickname: "danuel",
    isAdmin: true,
  };

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

// 1. PostsContext 생성
const PostsContext = createContext();

const Posts = () => {
  const posts = [
    {
      title: "useContext 알아보기",
      content: "이번 편에서는 React Context를 ...",
    },
  ];

  return (
    <PostsContext.Provider value={posts}>
      <Children />
    </PostsContext.Provider>
  );
};

// 2. user와 posts를 가져와 화면에 보여주기
const Children = () => {
  const user = useContext(AppContext);
  const posts = useContext(PostsContext);

  let label = "user";
  if (user.isAdmin) {
    label = "admin";
  }

  return (
    <div>
      <div>{label}</div>
      <div>{user.nickname}</div>
      <div>
        {posts.map((post, index) => (
          <div key={index}>
            <div>{post.title}</div>
            <div>{post.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

• useContext를 이용해서 user와 posts를 받아와 처리한다.

Consumer vs useContext

useContext를 이용하면 Context.Consumer로 컴포넌트를 작성할 때 보다 더 쉽고 편하고 직관적으로 작성할 수 있습니다. useState, useEffect 등 여러 React Hooks와 조합해서 사용하기에도 용이하다는 장점이 있다.

Consumer는 해당 태그 내에서 처리가 가능한데
useContext를 이용하면 return 위쪽의 코드로 값을 처리하여 더 유용하다 생각한다.

출처

react
context API 예시