2nd/00_Raw/Component-Based Architecture.md

Component-Based Architecture

📌 Brief Summary

Component-Based Architecture(컴포넌트 기반 아키텍처)는 사용자 인터페이스(UI)를 재사용 가능한 독립적인 컴포넌트 단위로 분해하여 구성하는 아키텍처 패턴입니다 [1, 2]. 이 설계 방식은 일관성 있는 디자인 시스템을 구축하고, 코드 재사용을 장려하며, 개발자와 디자이너 간의 공통 어휘를 확립하는 데 탁월한 효과를 발휘합니다 [1]. 그러나 비즈니스 로직이나 상태(State)의 구성 방법에 대해서는 명확한 기준을 제시하지 않으므로, 대규모 애플리케이션에서는 구조화된 아키텍처를 추가로 도입하지 않으면 로직 계층이 무질서해질 수 있는 한계를 지닙니다 [1].

📖 Core Content

• UI 분해(UI Decomposition)와 디자인 시스템 지향: 리액트(React)는 본질적으로 컴포넌트 기반으로 작동하며, 컴포넌트 기반 아키텍처의 핵심 원칙은 UI를 세분화하여 구성하는 것입니다 [1, 2]. 이 구조는 최신 사용자 인터페이스와 디자인 시스템을 설계할 때 가장 적합한 모델로 평가받으며, 아토믹 디자인(Atomic Design)과 같은 방법론을 통해 시각적 일관성과 컴포넌트의 강력한 재사용성을 제공합니다 [1, 2].

• 대규모 확장성의 한계 (구조적 부족함): 컴포넌트 기반 아키텍처는 UI 요소를 깔끔하게 추상화하는 데 성공적이지만, 비즈니스 로직이나 상태 관리(State Management)를 어디에 어떻게 배치해야 하는지는 의도적으로 규정하지 않습니다 [1]. 이로 인해 적절한 제약 없이 개발을 진행하면 잘 정돈된 UI 컴포넌트 아래에 비즈니스 로직이 혼란스럽게 뒤섞이는 현상이 발생합니다 [1]. 따라서 애플리케이션의 규모가 커질 경우, 컴포넌트 기반 방식 단독으로는 불충분하며 기능 분할 설계(Feature-Sliced Design)나 도메인 주도 설계(DDD)와 같은 추가적인 아키텍처의 도입이 필요합니다 [1, 3, 4].

• 클린 코드와 설계 원칙의 적용: 유지보수 가능성을 높이기 위해 컴포넌트 설계 시 객체 지향 및 소프트웨어 엔지니어링 원칙을 적용할 수 있습니다. 예를 들어, 개방-폐쇄 원칙(OCP)을 리액트의 children prop이나 렌더 프롭(render props)을 통한 합성(Composition) 기능으로 구현하면, 기존 컴포넌트의 소스 코드를 수정하지 않고도 새로운 기능을 유연하게 확장할 수 있습니다 [5]. 또한, 컴포넌트가 너무 커지고 여러 책임(데이터 페칭, 상태 관리, 렌더링 등)을 지게 되면 단일 책임 원칙(SRP)에 따라 더 작고 집중된 컴포넌트로 분리하여 관리해야 합니다 [6].

🔗 Knowledge Connections

• Related Topics: Atomic Design, Feature-Sliced Design, SOLID Principles
• Projects/Contexts: React Application Architecture, Design Systems
• Contradictions/Notes: 소스에 따르면 컴포넌트 기반 아키텍처(또는 아토믹 디자인)는 훌륭한 UI 시스템 구축을 가능하게 하지만, 상태 소유권과 비즈니스 로직 구성에 대한 규칙이 없기 때문에 규모가 큰 리액트 애플리케이션의 아키텍처로는 불충분하다고 주장합니다 [1].

---

Last updated: 2026-04-26