React로 프로젝트를 진행하다 보면 공통 상태를 여러 컴포넌트에 전달해야 하는 상황이 생깁니다. 처음엔 간단했던 상태가 점점 커지고, 부모 → 자식 → 손자 → 증손자… 계층을 따라 전파되면서 ‘props drilling’ 문제에 봉착하죠.

“이거… 전역 상태로 관리해야 하지 않을까?”라는 생각이 들 때, 선택지는 크게 두 가지입니다:

  1. Redux, Zustand, Jotai 등 외부 상태 관리 라이브러리
  2. React 자체 내장 기능인 Context API

이 글에서는 2번, 즉 Context API의 본질과 사용법, 장단점, 성능 이슈 및 실무 적용 전략까지 하나하나 자세히 풀어보겠습니다.

 

Context API란?

React Context API는 컴포넌트 트리 전체에 데이터를 효율적으로 공유하기 위한 전역 상태 관리 도구입니다.
주요 개념은 아래 코드로 설명됩니다

const ThemeContext = React.createContext('light');

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

const theme = useContext(ThemeContext); // 'dark'

Context는 다음처럼 작동합니다

  • createContext()로 Context를 생성
  • Provider로 상태 값을 하위 컴포넌트에 공급
  • useContext() 훅을 통해 하위에서 구독

Context API의 핵심 장점

1) 별도 설치 없이 즉시 사용 가능

Redux나 Zustand는 의존성 설치와 보일러플레이트가 필요하지만, Context는 React 자체 기능이라 바로 사용 가능합니다.

2) props drilling 해소

깊이 중첩된 컴포넌트 트리에서 상태를 전달할 때 중간 컴포넌트를 거치지 않고 바로 필요한 컴포넌트로 전달할 수 있습니다.

3) 컴포넌트 기반 구조와 조화

상태를 컴포넌트 단위로 잘게 나눌 수 있어, 모듈화와 응집도가 향상됩니다.

4) 테스트 용이성

Provider를 통해 원하는 값을 주입할 수 있으므로 테스트 시점에 필요한 상태를 쉽게 제어할 수 있습니다.

5) 타입스크립트 친화적

createContext<User | null>(null) 형태로 타입 안전하게 작성할 수 있어, 대규모 TS 프로젝트에서도 안정성을 확보할 수 있습니다.

Context를 언제 쓰는 게 적절할까?

적합한 상황

  • 사용자 인증 정보
  • 테마, 다국어 설정
  • 레이아웃 정보 (e.g. 모바일/데스크탑)
  • 접근성 옵션
  • 전역 알림, 모달 컨트롤러 등 UI 상태

부적절한 상황

  • 초당 수십 번 이상 바뀌는 값 (e.g. 스크롤, 입력값)
  • 일부 컴포넌트만 사용하는 상태
  • 비동기 로직이 복잡한 상태

→ 이럴 땐 Zustand, Redux Toolkit, React Query가 더 적절합니다.

성능: Context는 정말 느린가요?

핵심 문제: 리렌더링

Context의 value가 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링됩니다. 심지어 해당 값과 직접적으로 관련 없는 컴포넌트까지 영향을 받을 수 있습니다.

원인: 객체 참조 변경

<AuthContext.Provider value={{ user, setUser }}>  // ❌ 매번 새로운 참조

해결: useMemo로 참조 고정

const value = useMemo(() => ({ user, setUser }), [user]);
<AuthContext.Provider value={value}>  // ✅ 불필요한 리렌더 방지

예시: 인증 상태 전역 공유

// AuthContext.tsx
const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const value = useMemo(() => ({ user, setUser }), [user]);

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

export const useAuth = () => useContext(AuthContext);

이후에는 어느 컴포넌트든 다음처럼 간편하게 인증 상태를 접근할 수 있습니다:

const { user } = useAuth();

커스텀 훅으로 추상화하기

export const useTheme = () => useContext(ThemeContext);

장점

  • 내부 구현 캡슐화 → 변경에도 외부 영향 최소
  • 재사용성 증가
  • 코드 가독성 향상
const theme = useTheme();  // 단 한 줄로 테마 접근

Context 분리 전략

Context를 기능 단위로 나누면 다음과 같은 이점이 있습니다

  • 불필요한 리렌더링 최소화
  • 유지보수 용이
  • 단일 책임 원칙 준수
contexts/
  ├─ ThemeContext.tsx
  ├─ AuthContext.tsx
  ├─ ModalContext.tsx

고급 최적화 전략

전략 설명
useMemo() value 객체 재생성 방지
useCallback() setter 함수 참조 고정
React.memo 불필요한 리렌더 방지
Context 분리 변경이 잦은 상태는 분리 관리
Provider 중첩 최소화 과도한 트리 구조 방지

 

Context vs Redux vs Zustand 비교

항목 Context API Redux Toolkit Zustand
복잡도 낮음 중간 낮음
학습 난이도 쉬움 높음 쉬움
미들웨어 없음 풍부 (thunk, saga) 일부 가능
비동기 직접 구현 공식 지원 기본 지원
리렌더링 제어 어려움 쉬움 쉬움
설치 필요 없음 필요 필요

 

마무리: Context는 "가볍고 강력한" 도구다

Context API는 “간단한 전역 상태를 빠르게 공유하고 싶을 때” 가장 적절한 도구입니다. 모든 상태를 Context로 관리하려 하지 말고, 작고 명확한 책임을 가진 Context로 기능을 분리하는 것이 핵심입니다.

Redux의 대체제가 아니라, React 개발자의 도구 상자에 꼭 필요한 필수 도구 중 하나로 바라보는 게 맞습니다.

728x90

티스토리툴바