2nd/10_Wiki/Topics/Frontend_Mastery/React Component Patterns.md

React Component Patterns

📌 Brief Summary

React Component Patterns(리액트 컴포넌트 패턴)은 확장 가능하고 유지보수가 용이한 프론트엔드 애플리케이션을 구축하기 위해 컴포넌트를 구성하고 설계하는 구조적 방법론입니다 [1, 2]. 단순한 속성(Prop) 기반의 경직된 설정에서 벗어나 조합(Composition) 중심의 API로 전환함으로써 Prop Drilling을 줄이고, 높은 재사용성과 유연한 UI를 구현하는 데 목적이 있습니다 [1, 3, 4]. 대표적인 패턴으로는 아토믹 디자인, 컴파운드 컴포넌트, 헤드리스 컴포넌트 등이 있습니다 [2, 5, 6].

📖 Core Content

• 속성 기반(Prop-Driven)에서 조합 중심(Composition-Driven)으로의 전환 초기 컴포넌트는 모든 레이아웃과 동작의 변수를 속성(Prop)으로 전달받지만, 요구사항이 늘어날수록 Prop이 기하급수적으로 증가하며 내부 로직이 강하게 결합되는 '블랙박스' 형태가 되기 쉽습니다 [7-9]. 이를 해결하기 위해, 상태와 동작 규칙만을 컴포넌트가 제공하고 실제 레이아웃과 구조 결정권은 사용자(Consumer)에게 넘기는 조합 중심 패턴이 권장됩니다 [4].

• 아토믹 디자인 (Atomic Design) UI를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages) 등 5단계의 입자성으로 나누어 구성하는 방법론입니다 [2, 10-12]. 베이스 스타일을 한눈에 파악할 수 있어 디자인 시스템의 일관성을 유지하고 확장에 유리합니다 [5, 13].

• 컴파운드 컴포넌트 (Compound Components) 부모 컴포넌트가 전역 상태를 소유하고, 자식 컴포넌트들이 React Context를 통해 암시적으로 상태를 공유하며 하나의 단위로 협력하는 패턴입니다 [5, 14-16]. HTML의 <select>와 <option> 태그처럼 동작하며, Prop Drilling 없이 선언적이고 가독성 높은 API를 제공하여 Radix UI 등에서 널리 쓰입니다 [5, 14, 17].

• 헤드리스 컴포넌트 (Headless Components) 상태 관리와 동작 로직만 제공하고 UI(마크업)의 렌더링은 전적으로 사용자에게 위임하는 패턴입니다 [6, 18]. 로직과 시각적 요소가 분리되므로 디자인 시스템이나 프레임워크에 구애받지 않는 높은 재사용성과 접근성을 보장합니다 [6, 19].

• 렌더 프롭스 (Render Props) 함수를 자식(child)으로 전달하여 컴포넌트 간에 로직을 공유하는 기법으로, 렌더링의 세밀한 제어 권한을 소비자에게 부여할 때 유용합니다 [6, 20].

• 오버라이드 패턴 (Overrides Pattern) Uber의 Base Web 디자인 시스템 등에서 활용되는 방식으로, 컴포넌트 내부의 각 하위 요소들에 식별자를 부여하고 사용자가 overrides 속성을 통해 추가적인 prop, 스타일을 전달하거나 컴포넌트 자체를 완전히 교체할 수 있게 합니다 [21-24]. 이를 통해 불필요한 prop 확장을 막고 극단적인 맞춤형 UI 요구사항(Edge cases)을 수용할 수 있습니다 [21, 24].

• 슬롯 / 영역 (Slots / Regions) 및 컨테이너 패턴 헤더, 푸터, 액션 등 의도된 영역을 미리 비워두어 사용자가 자신의 콘텐츠를 끼워 넣을 수 있게 함으로써 Prop 과부하를 피하는 방식입니다 [19]. 또한, 상태 및 데이터를 다루는 로직(Container)과 UI 렌더링(Presentational)을 분리하는 패턴도 Storybook과 같은 환경에서 컴포넌트를 독립적으로 테스트하기 좋게 만듭니다 [25].

🔗 Knowledge Connections

• Related Topics: Compound Components, Headless Components, Atomic Design, Overrides Pattern, Render Props, Feature-Sliced Design (FSD)
• Projects/Contexts: Uber Base Web, Radix UI
• Contradictions/Notes: 컴파운드 컴포넌트 패턴은 뛰어난 유연성을 제공하지만 사용자가 하위 컴포넌트를 임의로 누락하거나 순서를 변경할 수 있어 UX나 접근성 일관성이 깨질 위험(Too much freedom)이 있습니다. 따라서 명확한 조합 경계와 문서화가 필수적입니다 [26, 27]. 아울러 아토믹 디자인은 시각적 구조화에는 유리하지만 복잡한 비즈니스 로직이나 상태가 엮인 컴포넌트를 분류할 때 한계가 있어, 종종 기능 분할 설계(Feature-Sliced Design, FSD)와 함께 결합되어 사용됩니다 [28].

---

Last updated: 2026-04-26