Context API

https://ko.reactjs.org/docs/context.html 

Context – React

Context: 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공

💡 React 애플리케이션에서 props 전달 방식: 위에서 아래로(부모에서 자식으로)
→ 애플리케이션 안의 여러 컴포넌트들에 전달해줘야 하는 props의 경우 해당 과정 번거로움
⭐️ context 이용하여 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 해당 값 공유 가능

❗️특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업이 3~4개 이상의 컴포넌트를 거쳐서 전달 해야하는 일이 발생하는 경우 번거러움

→ 리액트의 Context API와 dispatch 사용하여 해결

Context API

• 프로젝트 안에서 전역적으로 사용할 수 있는 값 또는 상태를 관리 가능 → 값은 함수일 수 있고, 어떤 외부 라이브러리 인스턴스일 수 있고, DOM일 수 있음
• 새로운 Context를 만드는 방법
  • const UserDispatch = React.createContext(null);
  • createContext의 파라미터에는 Context의 기본 값 설정 가능(지정하지 않을 경우 사용
• Provider 컴포넌트: Context의 값 정함
  • <UserDispatch.Provider value={dispatch}>…</UserDispatch.Provider>
  • value라는 값 설정
  • Provider에 의해 감싸진 컴포넌트 중 어디서든지 Context의 값을 다른 곳에서 바로 조회하여 사용 가능

export const UserDispatch = React.createContext(null);

return (
    <UserDispatch.Provider value={dispatch}>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
      <div>활성사용자 수: {count}</div>
    </UserDispatch.Provider>
  );

• 어디서든지 dispatch 꺼내 쓸 수 있음
• 나중에 사용하고 싶을 경우, 불러오는 방법
  • import { UserDispatch } from ‘./App’;

[사용하기]

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>
  );
});