21. Context API 를 사용하여 전역 값을 관리하자

# 리액트 프로젝트에서 발생할 수 있는 이런 상황을 상상해보자.

​

특정 함수들을 구현했는데 이를 사용하기 위해서 3-4개 이상의 컴포넌트를 거쳐 props 를 통해 전달되어야 한다면 매우 번거로울 것이다.

(컴포넌트 1개 정도 거치는건 괜찮을 것 같다.)

​

이럴 때에 Context API + dispatch 를 함께 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수가 있다.

 

ContextAPI 로 Context 만들기 : React.createContext()

const UserDispatch = React.createContext(null);

createContext 함수의 파라미터는 Context의 기본 값(Context 를 쓸 때 값을 아무것도 지정하지 않을 경우 사용)이다.

이렇게 Context 를 만들면 Context 안에는 Provider 라는 컴포넌트가 들어있는데

이 컴포넌트의 value 라는 값을 통해 Context 의 값을 정할 수 있다.

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

위와 같이 설정해주면 Provider 로 감싸진 컴포넌트 중 어디서든지 Context 값을 다른 곳에서 바로 조회해서 사용할 수 있다.

import React, { useContext } from 'react';
import { UserDispatch } from './App';

const User = React.memo(function User({ user }) {
  const dispatch = useContext(UserDispatch);

  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => {
          dispatch({ type: 'TOGGLE_USER', id: user.id });
        }}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button
        onClick={() => {
          dispatch({ type: 'REMOVE_USER', id: user.id });
        }}
      >
        삭제
      </button>
    </div>
  );
});

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default React.memo(UserList);

애초에 <UserDispatch.Provider value={dispatch}> 로 dispatch 를 넣어주었고,

이를 User 컴포넌트에서는 useContext(UserDispatch) 를 이용해 사용할 Context 를 dispatch 라는 변수에 담았다.

​

그리고 User 컴포넌트에서 아래와 같이 활용되고 있음을 알 수 있다.

...
dispatch({ type: 'TOGGLE_USER', id: user.id });
...

 

useState 와 useReducer 의 차이?

useReducer 를 사용한다면, 이렇게 Context API 를 이용해서 dispatch 를 전역적으로 사용할 수 있다.

→ 컴포넌트에게 함수를 전달해줘야 하는 상황에서 코드의 구조가 깔끔해진다.

---

출처 : https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook