TIL #72 | Context와 전역 상태 라이브러리의 차이?

context와 전역 상태 라이브러리 모두 Prop Drilling과 같은 문제점을 해결하기 위해
사용해왔는데 이 둘의 차이와 적절한 사용 방법에 대해 알고 싶어졌다.

👀 여기서 Prop Drilling의 문제점은 prop을 깊이 전달할 경우 전달받은 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려울 수 있고, 이럴 경우 오류 발생 시 추적이 힘들어질 수 있다는 점이다.

⭐️ Context API란?

전역 데이터를 관리할 수 있는 API

사용 방법

context의 사용 순서는 크게 3가지로 나눌 수 있다.
1. context 생성: createContext
2. context 전달: Provider
3. context 변화 감지: Consumer

context API를 사용하기 위해 createContext를 import 하기

// context/FamilyContext.js
import { createContext } from "react";

export const FamilyContext = createContext(null); // 상태의 초기값 설정

상태값을 제공할 상위 컴포넌트에서 Provider을 지정하기

• 상태값에 접근하기 위해선 Provider의 하위 컴포넌트에 포함되어야 합니다. 예를 들어 아래의 예시처럼 Father 컴포넌트는 값을 제공해주는 GrandFather 컴포넌트에 포함되어 있어야 합니다.

import React from "react";
import { FamilyContext } from "../context/FamilyContext";
import Father from "./Father";

function GrandFather() {
  const houseName = "Kim";
  const poketMoney = 10000;

  return (
    <FamilyContext.Provider // provider로 값을 내려준다.
      value={{
        houseName,
        poketMoney,
      }}
    >
      <Father /> // 값을 제공받을 하위 컴포넌트
    </FamilyContext.Provider>
  );
}

export default GrandFather;

(1) 값을 전달받을 컴포넌트에서 useContext로 값 가져오기

import React, { useContext } from "react";
import { FamilyContext } from "../context/FamilyContext";

function Child() {
  const data = useContext(FamilyContext); // 값 가져오기
  console.log("data", data);

  return (
    <div>
      <p>집 이름 : {data.houseName}</p>
      <p>용돈 : {data.poketMoney}</p>
    </div>
  );
}

export default Child;

Consumer로 상태값에 접근하기

Context API와 전역 상태 라이브러리의 차이

Redux는 Context API를 사용하여 만든 라이브러리 중 하나이므로 전역 상태 관리에서는 큰 차이는 없다고 한다.
차이점은 Context는 단지 종속성 주입의 한 형태일 뿐이고 Redux는 전역 상태 관리 외의 다양한 기능을 제공하여 상태 관리를 더 수월하게 해준다는 것이다.

그렇다면 Context API와 Redux 중 어떤 것을 사용하는 것이 적절할까?

당연하게도 목적성에 따라 기준이 달라질 것이고 그 기준에 따라 선택하면 된다.
Redux와 같은 전역 상태관리 라이브러리는 많은 기능을 제공하지만 보일러 플레이트가 많고 러닝커브가 높다.
오직 전역 상태 관리만을 사용한다면 Context API를 사용하는 것이 좋고 그 외의 필요한 기능이 있다면 Redux를 선택해 사용하는 것이 좋다.
또한 Context API와 전역 상태 관리 라이브러리를 같이 사용하는 경우도 봤는데 어떤 상황에서 사용하는 것인지 다음에 알아봐야겠다.