2nd/00_Raw/Reusable UI Components.md

Reusable UI Components

📌 Brief Summary

재사용 가능한 UI 컴포넌트는 다양한 프로젝트와 컨텍스트에서 휴대 가능(portable)하고, 예측 가능(predictable)하며, 명확한 목적(purposeful)을 가지도록 설계된 프론트엔드의 핵심 구성 요소입니다 [1, 2]. 이는 단순히 코드의 양을 줄이는 것이 아니라 요구사항의 변화에도 무너지지 않는 견고한 API를 설계하는 것을 의미합니다 [3]. 잘 설계된 컴포넌트는 팀이 일관성 있고 접근성이 뛰어나며 확장 가능한 인터페이스를 빠르게 조립할 수 있게 해주는 '레고 키트'와 같은 역할을 합니다 [1].

📖 Core 소스 Content

• 설계의 4대 황금 규칙 (Four Golden Rules): 재사용 가능한 컴포넌트는 단일 기능만 수행하는 '단일 책임(Single Responsibility)', 상속 대신 작은 컴포넌트를 조합하는 '합성(Composition Over Inheritance)', 명확한 입력(props)과 출력(callbacks)을 가지는 '명시적 계약(Explicit Contracts)', 그리고 스크린 리더와 키보드 탐색 등을 기본적으로 지원하는 '접근성 최우선(Accessibility First)' 원칙을 따라야 합니다 [4].
• API 및 상태 관리 (API Design & State Boundaries):
  • 초기 컴포넌트 설계 시 속성(Prop)에만 의존하는 방식(Prop-Driven)은 요구사항이 증가함에 따라 Prop의 수가 기하급수적으로 늘어나고 유지보수성을 파괴하는 원인이 됩니다 [5-7].
  • 컴포넌트 내부의 상태를 최소화하는 것이 재사용성을 높입니다 [8]. UI의 시각적 세부 사항(예: 툴팁 토글)은 내부에 유지하되, 비즈니스 로직이나 여러 컴포넌트가 조율해야 하는 상태는 부모 컴포넌트(상위)로 끌어올려야 합니다 [8, 9].
• 재사용성을 위한 주요 아키텍처 패턴:
  • 합성 컴포넌트 (Compound Components): 부모 컴포넌트가 전역 상태를 관리하고 하위 컴포넌트(예: Accordion의 Header, Body)가 해당 컨텍스트 내에서 상태를 암시적으로 공유하여 사용자에게 레이아웃 조합의 자유를 주는 패턴입니다 [10-12].
  • 헤드리스 컴포넌트 (Headless Components): 상태 관리, 키보드 탐색, 접근성 로직 등만 제공하고 시각적인 마크업(UI)은 전적으로 소비자에게 위임하는 방식입니다 [13-15].
  • 렌더 프롭스 (Render Props): 함수를 자식이나 prop으로 전달하여 렌더링 제어권을 부여하는 패턴으로, API를 이중으로 분기하지 않고도 고급 사용자에게 제어권을 제공할 때 유용합니다 [16-18].
  • 오버라이드 패턴 (Overrides Pattern): Uber의 Base Web 등에서 사용되며, 내부의 각 하위 요소에 식별자를 부여해 외부에서 특정 속성이나 스타일, 혹은 하위 컴포넌트 자체를 통째로 교체(override)할 수 있게 합니다. 이는 Prop의 남용을 막고 엣지 케이스 확장을 돕습니다 [19-22].
  • 아토믹 디자인 (Atomic Design): UI를 기본 빌딩 블록인 원자(Atoms)부터 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 계층화하여 조립해 나가는 방법론입니다 [23-25].
• 스타일링과 확장성: 확장 가능한 컴포넌트 라이브러리를 위해서는 색상, 타이포그래피 등의 시각적 속성을 하드코딩하지 않고 디자인 토큰(Design Tokens)을 사용하여 테마 호환성을 갖춰야 합니다 [9]. 또한, Tailwind CSS와 같은 유틸리티 퍼스트 프레임워크 사용 시 CSS 클래스 문자열이 길어지는 것을 방지하기 위해 반복되는 스타일 패턴을 컴포넌트로 추출하는 것이 핵심입니다 [26, 27].

🔗 Knowledge Connections

• Related Topics: Compound Components, Design Tokens, Atomic Design, Headless Components, Overrides Pattern
• Projects/Contexts: Next.js App Router (서버 컴포넌트와 클라이언트 컴포넌트의 렌더링 경계 관점), Shopify Polaris (접근성과 일관성이 높은 컴포넌트 라이브러리 사례), Uber Base Web (오버라이드 패턴이 구현된 디자인 시스템 사례)
• Contradictions/Notes: 소스는 Compound Component 패턴이 매우 강력한 유연성을 제공한다고 설명하지만, 레이아웃이 고정되어 있거나 버튼, 아이콘 같은 단순한 컴포넌트에는 불필요한 추상화와 복잡성을 유발할 수 있으므로 기본값으로 과도하게 사용하는 것은 피해야 한다고 경고합니다 [28, 29]. 또한, Tailwind CSS에서 스타일 재사용을 위해 @apply 지시어를 사용하는 대신 가급적 React 컴포넌트로 추상화하는 것을 우선순위로 권장합니다 [27, 30].

---

Last updated: 2026-04-26