# [[React Context|React Context]]

## 📌 Brief Summary
React Context는 React 애플리케이션 내에서 자식 컴포넌트들이 프롭스 내리꽂기([[Prop Drilling|Prop Drilling]]) 없이 부모로부터 데이터를 직접 소비할 수 있게 해주는 상태 공유 메커니즘이다 [1, 2]. 복합 컴포넌트(Compound Components) 패턴에서 내부적으로 상태를 공유할 때 강력하게 활용되어 유연한 UI 컴포넌트 구축을 돕는다 [3, 4]. 그러나 최근 도입된 React Server Components(RSC) 환경에서는 Context가 지원되지 않기 때문에, 이를 의존하는 기존의 [[CSS-in-JS|CSS-in-JS]] 라이브러리 및 테마(Theming) 시스템 아키텍처에 근본적인 변화를 요구하고 있다 [5, 6].

## 📖 Core Content
* **컴포넌트 합성과 상태 공유 (Compound Components):** React Context는 유연하고 재사용 가능한 UI 컴포넌트를 설계하는 복합 컴포넌트 패턴의 핵심 기술이다 [2, 7]. 공개 API가 아닌 내부적인 상태 계약(Internal Contract)으로 사용되며, 부모 컴포넌트(Provider)가 Context에 상태를 저장하면 개별 자식 컴포넌트(예: Header, Body 등)가 필요한 상태만 구독하여 동작하게 한다 [3, 4, 8]. 이를 통해 컴포넌트의 결합도를 낮추고 모듈화된 UI 시스템을 구축할 수 있다 [3].
* **성능 최적화 시 주의점:** Context에 전역 또는 여러 개의 상태가 묶여 있을 경우, 상태 변경 시 Context를 구독하는 모든 하위 컴포넌트의 불필요한 리렌더링을 유발할 수 있다 [9]. 따라서 잦은 리렌더링을 방지하기 위해서는 상태를 세분화하여 Context를 분리(Split Contexts)하는 최적화 전략이 중요하다 [9, 10].
* **[[React Server Components (RSC)|React Server Components (RSC]] 환경에서의 제약:** React Server Components는 브라우저가 아닌 서버에서만 실행되므로 React Context를 전혀 사용할 수 없다 [6]. 이로 인해 Context에 기반하여 동적 스타일링과 테마를 런타임에 주입하는 styled-components나 Emotion 같은 CSS-in-JS 라이브러리는 RSC(예: [[Next.js App Router|Next.js App Router]]) 환경과 근본적으로 호환되지 않는 문제를 겪게 되었다 [6, 11].
* **테마 시스템(Theming)의 구조적 변화:** 기존 styled-components는 `React.createContext`로 생성된 `ThemeConsumer`와 `ThemeProvider`를 사용해 전체 컴포넌트 트리에 테마 객체를 주입했다 [12]. 하지만 RSC 환경에서 Context를 사용할 수 없게 됨에 따라, 테마 관리를 위해 React Context에 의존하지 않고 CSS Custom Properties (CSS 변수)를 사용하여 서버 및 클라이언트 컴포넌트 모두에서 동작할 수 있도록 권장하는 방식으로 아키텍처가 변화하고 있다 [5, 13].

## 🔗 Knowledge Connections
- **Related Topics:** [[Compound Components|Compound Components]], React Server Components (RSC), CSS-in-JS, [[Prop Drilling|Prop Drilling]]
- **Projects/Contexts:** [[Next.js App Router|Next.js App Router]], styled-components Theming, [[Shopify Polaris|Shopify Polaris]] Context
- **Contradictions/Notes:** 컴포넌트의 유연성과 상태 공유 측면에서 React Context 기반 패턴(CSS-in-JS, Compound Components 등)은 뛰어난 개발자 경험을 제공하지만, 렌더링 성능과 RSC라는 새로운 서버 아키텍처 맥락에서는 런타임 오버헤드와 호환성 문제를 일으킵니다 [6, 11, 14]. 결과적으로, 현대 프론트엔드 설계에서는 Context 의존도를 줄이고 정적 빌드타임 도구(예: [[Tailwind CSS|Tailwind CSS]], CSS Modules)나 Zero-Runtime CSS-in-JS(예: [[vanilla-extract|vanilla-extract]])를 사용하는 쪽으로 권장 사항이 상충 및 변화하고 있습니다 [6, 15].

---
*Last updated: 2026-04-26*