TIL - Context API는 정말로 상태 관리 라이브러리일까?

오늘 React의 Context API에 대해 전 팀원과 이야기하면서, 이것이 실제로 상태 관리 라이브러리인지에 대한 궁금증이 생겼다. 이에 대해 조사한 결과, 중요한 사실들을 발견하게 되었다.

주요 발견

1. Context API는 상태 관리 라이브러리가 아니다

• 데이터 전달 메커니즘: Context API는 컴포넌트 트리에서 데이터를 효율적으로 전달하기 위한 도구이다.
• 상태 관리의 실제 주체: 상태 관리는 useState, useReducer와 같은 Hook을 통해 이루어진다.
• 비교 대상: Redux나 MobX 같은 상태 관리 라이브러리와는 목적과 기능이 다르다.

2. Context API의 역할

• "데이터 전달 파이프": Context는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 파이프 역할을 한다.
• Prop Drilling 해결: 중간 컴포넌트를 거치지 않고도 필요한 데이터에 접근할 수 있어 Prop Drilling 문제를 완화한다.
• 전역 데이터 공유: 테마, 언어 설정, 인증 상태 등 애플리케이션 전역에서 필요한 데이터를 공유하는 데 유용하다.

3. Context API와 상태 관리의 조합

• 함께 사용해야 효과적: 전역 상태 관리를 위해서는 Context와 상태 관리 Hook을 결합하여 사용해야 한다.
• 사용 방법: useState나 useReducer로 상태를 생성하고, Context를 통해 그 상태를 필요한 컴포넌트에 전달한다.
  
  
  

---

코드 예시

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

// Context 생성
const AuthContext = createContext();

// Context Provider 컴포넌트
const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </AuthContext.Provider>
  );
};

// Context 사용을 위한 커스텀 Hook
const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuth는 AuthProvider 내에서 사용되어야 합니다.");
  }
  return context;
};

export { AuthProvider, useAuth };

 

결론

Context API는 상태 관리 라이브러리가 아니라, 상태를 전달하는 효율적인 도구이다. 실제 상태 관리는 useState, useReducer 등의 Hook을 통해 이루어지며, Context는 이 상태를 컴포넌트 트리 전체에 쉽게 공유할 수 있게 해준다.

비유하자면:

• Context는 파이프: 데이터가 흐르는 통로로서의 역할을 한다.
• useState/useReducer는 수도꼭지: 데이터를 생성하고 관리한다.