Antigravity Agent
4.0 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Context API | Context API는 React 애플리케이션에서 컴포넌트 트리를 따라 매번 수동으로 props를 전달해야 하는 'Prop Drilling' 문제를 해결하고 데이터를 효율적으로 공유할 수 있게 해주는 기능이다 [1]. | 2026-05-04 |
Context API
📌 Brief Summary
Context API는 React 애플리케이션에서 컴포넌트 트리를 따라 매번 수동으로 props를 전달해야 하는 'Prop Drilling' 문제를 해결하고 데이터를 효율적으로 공유할 수 있게 해주는 기능이다 [1]. 테마 설정이나 사용자 데이터와 같이 깊게 중첩된 컴포넌트 간에 상태를 공유해야 할 때 주로 사용된다 [2]. 특히 복합 컴포넌트(Compound Components) 패턴과 결합하여, 하위 컴포넌트들이 부모로부터 명시적인 props 전달 없이도 상태를 암시적으로 공유할 수 있도록 지원하는 핵심 기술로 활용된다 [3].
📖 Core Content
-
Prop Drilling 해결 및 상태 공유 Context API는 깊게 중첩된 컴포넌트에 데이터를 전달할 때 중간 컴포넌트들을 거치지 않고 직접 값을 전달할 수 있게 해준다 [1].
React.createContext()를 이용해 컨텍스트를 생성하고,<Context.Provider value={...}>를 통해 데이터를 공급하며, 하위 컴포넌트에서는useContext()훅을 사용하여 해당 데이터를 소비하는 방식으로 구현된다 [1]. -
복합 컴포넌트(Compound Components) 패턴의 기반 Context API는 탭(Tabs)이나 드롭다운(Dropdown)과 같이 여러 컴포넌트가 하나의 응집된 단위로 협력하는 복합 컴포넌트 패턴의 뼈대가 된다 [3, 4]. 자위 컴포넌트들이 활성화된 값(activeValue) 등을 수동으로 전달받지 않고 Context를 통해 읽어오므로, 사용자가 유연하게 컴포넌트 구조를 제어할 수 있는 API 설계가 가능해진다 [5].
-
안전한 Context 소비를 위한 가드(Guard) 패턴 하위 컴포넌트들이 부모 Context Provider 외부에서 실수로 사용될 경우를 대비해 보호 장치를 마련하는 것이 권장된다 [5]. 예를 들어
useTabsContext()와 같은 훅 안에서 Context 값을 확인하고, 값이 없다면 개발자에게 명확한 설명이 담긴 에러를 던지게 함으로써 런타임 오류와 헷갈리는 버그를 방지할 수 있다 [5].
⚖️ Trade-offs & Caveats
-
기본값 가드 누락에 따른 디버깅 어려움 Context를 생성할 때 올바른 기본값이나 방어 로직(Default Value Guard) 없이 사용하면, 컴포넌트가 Provider 외부에서 렌더링될 때 오류의 원인을 파악하기 힘든 조용한 실패(Silent failure)를 겪을 수 있다 [6].
-
React 서버 컴포넌트(RSC) 아키텍처에서의 클라이언트 경계(Client Boundary) 문제 Context API는 React 상태 메커니즘을 사용하므로 서버 컴포넌트에서는 동작할 수 없으며, 필연적으로 클라이언트 컴포넌트(
'use client')에서 사용되어야 한다 [7]. 만약 트리 상단에서 Context를 사용하면 하위 컴포넌트들까지 암시적으로 모두 클라이언트 컴포넌트로 취경되는 문제가 발생한다 [7, 8]. 이를 우회하기 위해서는 Context Provider 로직만 별도의 파일로 분리하고, 부모 컴포넌트에서 하위 컴포넌트들을children프로프(prop)로 넘겨받도록 구조를 리팩토링해야 한다 [8-10]. -
SSR 환경에서의 민감한 데이터 노출 위험 서버사이드 렌더링(SSR) 시 인증 토큰이나 쿠키와 같은 민감한 정보를 클라이언트 컴포넌트에서 사용하기 위해 React Context에 넣게 되면, 이 정보가 클라이언트 번들에 노출되는 보안 문제가 발생할 수 있다 [11]. 이를 방지하려면 데이터를 암호화하여 서버에서만 해독되도록 처리하는 별도의 우회 기법이 필요하다 [11, 12].
Last updated: 2026-05-03