2nd/10_Wiki/Topics/Frontend/컴포넌트 기반 아키텍처 (React, Vue 등).md

# [[컴포넌트 기반 아키텍처 (React, Vue 등)|컴포넌트 기반 아키텍처 (React, Vue 등]]

## 📌 Brief Summary
컴포넌트 기반 아키텍처는 React, Vue, Angular와 같은 현대 프론트엔드 프레임워크에서 애플리케이션을 독립적이고 재사용 가능한 UI 단위(컴포넌트)로 분할하여 구축하는 방식입니다 [1], [2], [3]. 이 아키텍처는 전통적인 전역 CSS의 한계를 극복하기 위해 스타일과 로직을 컴포넌트 단위로 결합하고 캡슐화하는 방향으로 발전했습니다 [4], [5]. 결과적으로 코드의 중복을 줄이고, 여러 팀 간의 협업을 용이하게 하며, 대규모 프로젝트의 유지보수성과 확장성을 극대화하는 것을 핵심 목적으로 합니다 [1], [6], [7].

## 📖 Core Content
* **독립성과 재사용성 (Independence and Reusability):** 모던 프론트엔드 개발에서는 버튼, 카드, 네비게이션 바 등 반복적으로 사용되는 요소들을 컴포넌트로 분리합니다 [1], [2]. 한 번 작성된 컴포넌트는 애플리케이션 내 여러 페이지에서 재사용될 수 있어 코드 중복을 방지하고 UI의 일관성을 유지하게 해줍니다 [1].
* **스타일링 캡슐화와 [[CSS-in-JS|CSS-in-JS]] / CSS Modules:** 기존 CSS의 전역 스코프 문제는 컴포넌트 기반 구조에서 스타일 충돌을 일으키는 큰 단점이었습니다. 이를 해결하기 위해 스타일을 컴포넌트 단위로 캡슐화하는 CSS Modules와 CSS-in-JS 기술이 등장했습니다 [4], [5]. CSS Modules는 빌드 타임에 고유한 클래스명을 생성하여 다른 컴포넌트와의 스타일 충돌을 완벽히 차단하며 [8], [9], [10], CSS-in-JS([[styled-components|styled-components]] 등)는 컴포넌트 로직과 스타일 코드를 같은 위치에 두어(co-location) 코드 이식성과 관리 편의성을 높입니다 [11], [12], [13].
* **BEM 및 단일 파일 컴포넌트 (Single-File Components)와의 시너지:** BEM(Block Element Modifier) 방법론은 컴포넌트 아키텍처와 자연스럽게 어울립니다. React나 Vue의 각 컴포넌트는 BEM의 독립적인 'Block'에 매핑되어 내부 요소들을 예측 가능하게 구조화할 수 있습니다 [14], [15]. 또한, Vue와 Svelte 프레임워크는 `<style scoped>`를 지원하는 단일 파일 컴포넌트 방식을 제공하여, 마크업과 스타일을 한 파일 내에 안전하게 격리하고 개발자의 문맥 전환(context switching) 피로도를 줄여줍니다 [16], [17].
* **페이지가 아닌 컴포넌트 중심의 반응형 설계:** 현대의 반응형 설계는 전체 페이지 레이아웃 중심에서 개별 컴포넌트 중심으로 이동했습니다 [18]. [[Container Queries|Container Queries]](컨테이너 쿼리)를 사용하면 뷰포트 화면 크기가 아닌 부모 컨테이너의 가용 너비에 따라 컴포넌트 스스로 레이아웃을 조정하게 되므로, 사이드바나 전체 화면 등 어떤 맥락(context)에 배치되더라도 깨지지 않는 진정한 모듈식 재사용성을 확보할 수 있습니다 [19], [20], [21].
* **확장 가능한 디렉토리 구조 (Scalable Directory Structure):** 애플리케이션이 커지고 컴포넌트 수가 많아질 경우, 컴포넌트 파일들을 기능(Feature) 또는 도메인 기반으로 그룹화하는 구조가 권장됩니다 [22], [23], [24]. 특정 비즈니스 로직과 관련된 컴포넌트 및 그 스타일 파일을 기능별 폴더에 응집시키면, 향후 기능 삭제나 리팩토링 시 관련 스타일도 함께 안전하게 제거할 수 있어 코드 팽창(CSS Bloat)을 막고 유지보수성을 크게 높일 수 있습니다 [25], [26], [24].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Modules|CSS Modules]], CSS-in-JS, BEM, [[Container Queries|Container Queries]], [[Tailwind CSS|Tailwind CSS]], Single-File Components
- **Projects/Contexts:** 대규모 프론트엔드 프로젝트의 확장 가능한 폴더 구조 ([[Feature-Driven Architecture|Feature-Driven Architecture]]), [[React Server Components|React Server Components]](RSC) 환경에서의 스타일링 도구 선택 및 마이그레이션 전략
- **Contradictions/Notes:** CSS-in-JS(Styled-Components, Emotion 등)는 컴포넌트 로직과 스타일을 함께 두어 개발자 경험을 크게 향상시킨다고 평가받습니다 [11], [27]. 하지만 런타임 시점의 성능 오버헤드, 번들 크기 증가, 그리고 무엇보다 최신 React [[Server Components|Server Components]](RSC) 환경과의 비호환성 문제로 인해, 최근 대규모 프로젝트에서는 [[Tailwind CSS|Tailwind CSS]], CSS Modules 또는 Vanilla Extract와 같은 Zero-runtime 솔루션으로 회귀하는 추세가 강하게 나타나고 있습니다 [28], [29], [30], [31], [13], [32].

---
*Last updated: 2026-04-26*