2nd/10_Wiki/Topics/Frontend_Mastery/React 컴포넌트 기반 아키텍처.md

# [[React 컴포넌트 기반 아키텍처|React 컴포넌트 기반 아키텍처]]

## 📌 Brief Summary
React 컴포넌트 기반 아키텍처(CBA)는 애플리케이션을 재사용 가능하고 독립적인 기능 단위인 '컴포넌트'로 분할하여 조립하는 설계 방법론입니다 [1, 2]. 이 아키텍처는 상태([[State|State]])와 UI 로직을 캡슐화하고 Virtual DOM을 통해 브라우저의 렌더링 부하를 최소화하여 성능을 향상시킵니다 [3, 4]. 최근에는 React Server Components(RSC)와 [[React Compiler|React Compiler]]의 도입을 통해 서버-클라이언트 간의 하이브리드 실행 및 빌드 타임 렌더링 자동화까지 지원하는 방향으로 발전하고 있습니다 [5-7].

## 📖 Core Content
- **모듈성 및 캡슐화 ([[Modularity|Modularity]] and Encapsulation):** React 컴포넌트 아키텍처는 관심사의 분리([[_뇌와 팔다리의 분리_ - 관심사의 분리 (Separation of Concerns)|Separation of Concerns]])를 강력하게 지원합니다. 각 컴포넌트는 내부 구현 세부 사항과 상태를 캡슐화하며, 잘 정의된 인터페이스를 통해서만 상호작용합니다 [4, 8]. 이를 통해 여러 개발 팀이 서로 다른 컴포넌트를 병렬로 개발할 수 있어 시스템의 확장성과 유지보수성이 크게 향상됩니다 [9-11].
- **가상 DOM과 재조정 (Virtual DOM & [[Reconciliation|Reconciliation]]):** 브라우저의 실제 DOM을 직접 조작하는 것은 연쇄적인 Reflow와 Repaint를 유발해 비용이 매우 큽니다 [3]. React는 가상 DOM(Virtual DOM)이라는 가벼운 메모리 내 UI 표현을 구축하고, 상태 변경 시 O(n) 복잡도의 휴리스틱 Diffing 알고리즘을 통해 변경된 최소한의 노드만을 실제 DOM에 동기화(Reconciliation)합니다 [3, 12-14].
- **파이버 아키텍처 ([[Fiber Architecture|Fiber Architecture]])와 동시성:** 대규모 렌더링 시 메인 스레드가 차단되는 동기식 렌더링의 한계를 극복하기 위해 React 16부터 파이버(Fiber) 엔진이 도입되었습니다 [15]. 렌더링 작업을 '파이버 노드(Fiber node)'라는 컴포넌트 단위 작업으로 쪼개고, 렌더링을 중단하거나 재개할 수 있게 합니다 [15, 16]. 우선순위(Lanes 모델)에 따라 클릭이나 타이핑 등 긴급한 사용자 상호작용을 먼저 처리하여 UI의 끊김 없는 반응성을 유지합니다 [17-19].
- **리액트 서버 컴포넌트 (React [[Server Components|Server Components]], RSC):** 점대점(SPA) 구조에서 발생하는 방대한 번들 크기와 클라이언트 데이터 패칭 병목 현상을 해결하기 위해 등장한 아키텍처입니다 [5, 20]. RSC는 오직 서버에서만 실행되어 브라우저로 JavaScript 코드를 일절 전송하지 않으며(Zero Client-Side JavaScript), 백엔드 리소스(DB, 파일시스템 등)에 직접 접근합니다 [21-23]. 상호작용이 필요한 부분만 **클라이언트 컴포넌트**로 구성하여 불필요한 JS 다운로드와 [[Hydration|Hydration]] 비용을 제거합니다 [21, 23].
- **렌더링 최적화와 컴파일러 (React Compiler):** 이전에는 부모 컴포넌트가 업데이트될 때 발생하는 '연쇄적 재렌더링(Re-render Cascade)'을 막기 위해 `useMemo`, `React.memo` 등의 수동 메모이제이션이 필요했습니다 [24-27]. [[React 19|React 19]]부터 도입된 React Compiler는 빌드 타임에 추상 구문 트리(AST)를 분석하여, 불필요한 재렌더링을 막을 수 있는 세밀한 메모이제이션(Memoization) 경계를 자동으로 삽입함으로써 수동 최적화의 부담을 없앱니다 [6, 28, 29].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Virtual DOM|Virtual DOM]]`, `Reconciliation`, `Fiber Architecture`, `[[React Server Components|React Server Components]]`, `[[React Compiler|React Compiler]]`
- **Projects/Contexts:** `[[Next.js App Router|Next.js App Router]]`, `Meta's Quest Store and Instagram`
- **Contradictions/Notes:** 컴포넌트 기반 아키텍처는 극대화된 유연성을 제공하지만, 컴포넌트 수가 증가함에 따라 종속성 관리의 복잡성과 상호 통신 오버헤드가 단점으로 작용할 수 있습니다 [30, 31]. 또한 RSC 도입 시, 서버 컴포넌트 내에서는 브라우저 상호작용(예: onClick)이나 상태 관리(useState)를 사용할 수 없으며, 클라이언트 컴포넌트는 서버 컴포넌트를 직접 `import` 할 수 없다는 엄격한 구조적 제약 규칙이 따릅니다 [32-34].

---
*Last updated: 2026-04-25*