Antigravity Agent
33 lines
4.5 KiB
Markdown
33 lines
4.5 KiB
Markdown
# [[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* |