2nd/10_Wiki/Topics/컴포넌트 기반 아키텍처(Component-Based Architecture).md

컴포넌트 기반 아키텍처(Component-Based Architecture)

📌 Brief Summary

컴포넌트 기반 아키텍처는 사용자 인터페이스(UI)를 버튼, 카드, 모달과 같이 어디서나 재사용할 수 있는 독립적인 블록(컴포넌트)으로 나누어 구축하는 설계 방식이다 [1, 2]. 이 접근법은 코드를 한 번만 작성하여 여러 곳에서 사용하게 함으로써 코드 중복을 줄이고 애플리케이션 전체의 UI 일관성을 유지하게 한다 [1]. 모던 웹 개발에서는 디자인 시스템, 캡슐화된 CSS 스타일링, 그리고 반응형 동작을 페이지 단위가 아닌 컴포넌트 단위로 결합하여 대규모 프로젝트의 유지보수성과 확장성을 극대화하는 데 핵심적인 역할을 한다 [3-5].

📖 Core 소스 Content

• 독립성과 재사용성의 원칙 컴포넌트는 주변의 DOM 구조에 의존하지 않고 독립적으로 기능할 수 있도록 설계되어야 한다 [2, 6]. React, Vue, Angular와 같은 현대 프레임워크는 이러한 컴포넌트 기반 아키텍처를 따르며, 사용자 정의 훅(Hooks)이나 컴포넌트 디렉터리 분리를 통해 프로젝트를 더욱 작고 깔끔하게 유지보수할 수 있도록 돕는다 [1, 6, 7].

• 컴포넌트 중심의 CSS 스타일링(Scoping) 전략 전통적인 CSS의 가장 큰 취약점인 전역 스코프(Global Scope) 문제를 해결하기 위해 컴포넌트 단위의 스타일링이 발전해 왔다.

  • BEM (Block Element Modifier): BEM의 'Block'은 독립적이고 재사용 가능한 컴포넌트를 의미하며, 스타일이 깊게 중첩되는 것을 방지하고 컴포넌트의 경계를 명확히 하여 모듈화를 이룬다 [2, 6, 8].
  • CSS Modules & CSS-in-JS: 모던 자바스크립트 생태계에서는 빌드 타임에 고유한 클래스명을 생성하여 스타일 충돌을 방지하는 CSS Modules나, 컴포넌트 로직과 스타일을 동일한 공간에 위치시키는 CSS-in-JS(styled-components 등)를 통해 컴포넌트의 완벽한 캡슐화와 이동성(portability)을 확보한다 [5, 9-13].
  • Tailwind CSS: 유틸리티 우선(Utility-first) 프레임워크인 Tailwind는 React 등의 컴포넌트 내부 JSX/HTML에 직접 스타일을 조합함으로써, 컴포넌트를 삭제할 때 스타일도 함께 제거되도록 하여 고아(orphaned) CSS가 남는 것을 방지한다 [14, 15].

• 컴포넌트 단위의 반응형 설계 (Container Queries) 현대의 반응형 웹 디자인은 "페이지가 아닌 컴포넌트를 설계하라"는 원칙으로 진화했다 [3]. 기존의 미디어 쿼리는 브라우저의 뷰포트 크기에 의존했지만, **컨테이너 쿼리(Container Queries)**를 사용하면 컴포넌트가 자신이 배치된 부모 컨테이너의 가용 너비에 맞춰 스스로 레이아웃을 조정할 수 있다 [16-19]. 이는 반응형 동작을 페이지가 아닌 컴포넌트 고유의 속성으로 만들어, 컴포넌트가 사이드바나 전체 화면 어디에 배치되든 올바르게 동작하도록 한다 [4, 16, 20].

• 디자인 시스템과의 통합 (Design Tokens) 디자인 토큰은 글로벌 토큰, 의미론적(Alias) 토큰, 그리고 **컴포넌트 토큰(Component Tokens)**의 계층으로 구성된다 [21]. --button-bg: var(--color-primary)와 같이 특정 컴포넌트 전용으로 스코핑된 토큰을 사용하면, 전역 시스템의 일관성을 해치지 않으면서도 개별 컴포넌트의 스타일을 세밀하게 제어하고 다크 모드나 테마 변경에 유연하게 대응할 수 있다 [21-23].

🔗 Knowledge Connections

• Related Topics: BEM, CSS Modules, CSS-in-JS, Tailwind CSS, 디자인 시스템(DesignSystems), Container Queries
• Projects/Contexts: 대규모 프론트엔드 프로젝트(Large Frontend Projects), 모던 React/Vue 애플리케이션 구조
• Contradictions/Notes: 컴포넌트 스타일링 방식에서 Tailwind CSS는 개발 속도를 높이고 컴포넌트와 스타일을 함께 관리할 수 있지만 JSX 마크업이 매우 길어질 수 있는 단점이 있다. 반면, CSS Modules나 SCSS는 마크업을 깔끔하게 유지하고 복잡한 애니메이션을 다루기 좋으나, 스타일 파일과 컴포넌트 파일을 오가야 하는 컨텍스트 스위칭(Context switching) 비용이 발생하므로 프로젝트의 성격과 팀의 구성에 따라 적절한 선택이 필요하다 [12, 14, 15, 24, 25].

---

Last updated: 2026-04-26