2nd/00_Raw/React Context API.md

React Context API

📌 Brief Summary

React Context API는 컴포넌트 트리의 모든 레벨을 통해 prop을 일일이 전달해야 하는 'prop drilling' 문제를 해결하기 위해 도입된 React의 내장 데이터 전송 메커니즘입니다 [1, 2]. React.createContext()를 통해 생성되며, Provider를 통해 값을 브로드캐스트하고 하위 컴포넌트에서 useContext()를 호출하여 해당 데이터에 직접 접근할 수 있습니다 [2, 3]. 그러나 Context API는 그 자체로 독립적인 상태 관리 솔루션은 아니며, 실제 상태의 변경 및 관리는 여전히 useState나 useReducer에 의존해야 합니다 [2].

📖 Core Content

• 작동 방식 및 주요 특징: Context API는 일종의 브로드캐스트 라디오 타워처럼 작동합니다 [3]. 데이터가 필요한 컴포넌트 트리를 Provider로 감싸고 공유할 값을 prop으로 전달하면, 트리 내의 어떤 컴포넌트든 깊이와 상관없이 useContext()를 통해 데이터를 읽을 수 있습니다 [2]. 외부 패키지 설치가 필요 없는 'Zero dependency' 솔루션이라는 큰 장점이 있습니다 [4].

• 성능적 한계와 리렌더링 폭풍 (Re-render Storm): Context API의 가장 치명적인 단점은 컨텍스트 값이 변경될 때마다 해당 컨텍스트를 구독하는 모든 컴포넌트가 무조건 리렌더링된다는 점입니다 [5]. 컴포넌트가 객체의 특정 부분(예: user 정보)만 사용하더라도, 같은 컨텍스트 내의 다른 값(예: theme)이 변경되면 불필요한 렌더링이 발생합니다 [6]. React는 변경된 부분만 비교하여 렌더링을 건너뛰는 기능을 자체적으로 제공하지 않기 때문에, 대규모 애플리케이션에서는 전체 화면이 일시적으로 멈추는 등의 심각한 성능 저하를 유발할 수 있습니다 [7, 8].

• 적합한 사용 사례: 이러한 렌더링 특성 때문에 Context API는 변경이 거의 발생하지 않는 정적인 전역 상태를 공유할 때 가장 적합합니다 [4].

  • 테마 설정 (라이트/다크 모드) [4, 9]
  • 다국어 지원 (Locale) 및 기능 플래그(Feature flags) [4, 9]
  • 리렌더링 성능이 크게 중요하지 않은 소규모 앱이나 외부 의존성을 추가하고 싶지 않은 컴포넌트 라이브러리 개발 [4]

• 부적합한 사용 사례 및 대안 (Zustand & Redux): 장바구니, 알림, 실시간 데이터 등 빈번하게 변경되는 동적 상태를 관리할 때는 Context API 사용을 피해야 합니다 [10-12].

  • Zustand: Context API의 리렌더링 문제를 해결하기 위해, 컴포넌트가 자신이 필요한 상태 조각(slice)만 선택(select)하여 구독할 수 있도록 지원합니다. 상태가 React 렌더링 사이클 외부에서 관리되므로 성능이 뛰어납니다 [5, 6, 13].
  • Redux: 복잡한 비동기 작업, 파생 상태 관리, 그리고 엄격한 구조를 통한 Time-Travel 디버깅 등이 필요한 대규모 애플리케이션 및 팀 환경에 적합합니다 [14, 15]. Context API는 디버깅 도구가 부족하고 테스트 보일러플레이트가 깨지기 쉬운 단점이 있습니다 [14].

• 마이그레이션 및 리팩토링 전략: 성능 문제로 인해 Context API에서 Zustand 등으로 마이그레이션할 때는 시스템 전체를 한 번에 재작성(rewrite)하기보다는, 알림과 같은 단순한 유틸리티부터 시작해 점진적으로 스토어를 옮기는 방식(리팩토링)이 권장됩니다 [16]. 현실적으로는 정적 데이터에는 Context API를, 동적 상태에는 Zustand를 함께 혼용하여 사용하는 패턴이 매우 효과적입니다 [17].

🔗 Knowledge Connections

• Related Topics: Prop Drilling, State Management, Zustand, Redux, Performance Optimization
• Projects/Contexts: Frontend Architecture, React Scalability, Refactoring
• Contradictions/Notes: 소스에 따르면 Context API는 번들 크기가 0KB라는 장점 때문에 초기 선택지로 매력적으로 보일 수 있습니다. 하지만 상태가 빈번히 변경되는 앱에 적용할 경우, 리렌더링 문제(useMemo 등을 통한 수동 최적화)를 디버깅하는 데 막대한 개발자 시간이 낭비될 수 있으므로 "번들 크기만으로 상태 관리 도구를 선택하는 것은 페인트 무게를 보고 차를 고르는 것과 같다"고 경고합니다 [7, 9, 18].

---

Last updated: 2026-04-26