[G1-Sync] Manual knowledge update

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

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