Antigravity Agent
26 lines
3.6 KiB
Markdown
26 lines
3.6 KiB
Markdown
# [[Overrides Pattern|Overrides Pattern]]
|
|
|
|
## 📌 Brief Summary
|
|
Overrides Pattern(오버라이드 패턴)은 React 컴포넌트 라이브러리에서 재사용성과 유연성을 높이기 위해 컴포넌트의 내부 요소를 깊이 있게 커스터마이징할 수 있도록 허용하는 아키텍처 패턴입니다 [1, 2]. 컴포넌트의 각 하위 요소에 식별자를 부여하고 단일 `overrides` 속성(prop)을 노출하여, 개발자가 스타일을 수정하거나 추가 속성을 전달하고 렌더링되는 컴포넌트 자체를 교체할 수 있게 합니다 [3-5]. 이를 통해 모든 가능한 사용 사례에 대해 새로운 속성을 추가함으로 인해 발생하는 'prop soup(속성 과부하)' 현상을 방지하고 확장 가능한 UI를 구축할 수 있습니다 [5].
|
|
|
|
## 📖 Core Content
|
|
* **등장 배경 및 도입 목적:**
|
|
Uber의 Base Web 디자인 시스템 개발 과정에서 엔지니어들이 컴포넌트를 재사용할 때 가장 필요로 하는 것은 "컴포넌트에 대한 더 많은 제어권"이었습니다 [1]. 구체적으로는 스타일 커스터마이징, 복합 컴포넌트 내의 특정 하위 요소에 사용자 정의 속성 전달, 그리고 컴포넌트의 렌더링 자체를 수정할 수 있는 기능이 요구되었고, 이를 해결하기 위해 통합된 Overrides API가 도입되었습니다 [1].
|
|
|
|
* **작동 방식 및 구현 (객체 기반 컴포넌트 주입):**
|
|
* **요소 식별자 부여:** 컴포넌트 내부에 렌더링되는 모든 하위 요소(underlying element)에 식별자(identifier, 예: `Root`, `Option` 등)를 제공합니다 [3].
|
|
* **속성 및 스타일 병합:** 식별자를 통해 대상 요소에 추가적인 속성을 전달하거나, 기본 스타일과 깊게 병합(deep-merged)되는 스타일 오버라이드(객체 또는 함수 형태)를 적용할 수 있습니다 [4].
|
|
* **컴포넌트 교체:** 대상 식별자에 대한 대체 컴포넌트를 값으로 전달하여, 하위 요소를 완전히 교체(Component replacement)할 수 있습니다. 이를 통해 특정 하위 컴포넌트의 기능이나 형태를 자유롭게 변경할 수 있습니다 [3, 4].
|
|
|
|
* **주요 이점:**
|
|
* **최상위 속성 오버로드 방지:** 라이브러리 작성자가 엣지 케이스를 지원하기 위해 수많은 새로운 prop을 일일이 노출할 필요가 없으므로, 최상위 수준의 속성 API가 비대해지는 현상(Prop soup)을 방지합니다 [3, 5].
|
|
* **일관된 속성 전달:** 복합 컴포넌트 전체에서 일관성 없이 추가 속성이 프록시(proxy)되는 문제를 방지합니다 [3].
|
|
* **깊은 커스터마이징(Deep Customization) 지원:** 프리젠테이셔널 컴포넌트를 쉽게 교체할 수 있도록 하여, 라이브러리를 무겁게 만들지 않으면서도 다양한 요구 사항을 가진 수백 개의 내부 애플리케이션에 맞게 확장(scale)할 수 있게 해줍니다 [2, 3, 5].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Compound Components|Compound Components]], Headless Components, [[Design Systems|DesignSystems]]
|
|
- **Projects/Contexts:** Base Web, Uber
|
|
- **Contradictions/Notes:** 소스에 따르면, React 컴포넌트 아키텍처 패턴 중 [[Compound Components|Compound Components]]가 상태(Context) 공유를 통한 레이아웃의 유연성을 제공하고 [[Headless Components|Headless Components]]가 로직의 재사용성에 집중한다면, Overrides Pattern은 객체 기반 컴포넌트 주입을 통한 '깊은 커스터마이징(Deep customization)'에 특화된 패턴으로 분류 및 비교됩니다 [2].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |