docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

10_Wiki/Topics_Art/UI_UX_Assets/React 기반 싱글 페이지 애플리케이션(SPA)의 렌더링 최적화.md

@@ -1,4 +1,4 @@
-# [[React 기반 싱글 페이지 애플리케이션(SPA)의 렌더링 최적화]]
+# [[React 기반 싱글 페이지 애플리케이션(SPA)의 렌더링 최적화|React 기반 싱글 페이지 애플리케이션(SPA)의 렌더링 최적화]]
 
 ## 📌 Brief Summary
 React 기반 SPA의 렌더링 최적화는 브라우저의 중요 렌더링 경로(Critical Rendering Path)를 효율적으로 처리하고, 불필요한 DOM 조작 및 연산을 줄여 사용자와 상호작용하는 성능을 향상시키는 과정입니다 [1-3]. 가상 DOM(Virtual DOM)과 휴리스틱 비교(Diffing) 알고리즘을 통해 실제 DOM 업데이트를 최소화하며, Fiber 아키텍처 및 자동 배칭(Automatic Batching)으로 렌더링 작업을 스마트하게 스케줄링합니다 [4-8]. 최신 생태계에서는 수동 최적화의 한계를 극복하기 위해 React 컴파일러를 통한 자동 메모이제이션 및 React 서버 컴포넌트(RSC)를 활용해 클라이언트의 자바스크립트 번들 부담을 극적으로 줄이는 방향으로 발전하고 있습니다 [9-12].
@@ -16,8 +16,8 @@ React 기반 SPA의 렌더링 최적화는 브라우저의 중요 렌더링 경
     CSR 환경에서 큰 자바스크립트 번들은 초기 로딩(FCP, LCP)과 상호작용(INP)을 늦춥니다 [2, 46-48]. 따라서 `React.lazy()`를 이용한 라우트 단위의 코드 스플리팅(Code Splitting)과, 긴 목록에서 보이는 것만 렌더링하는 가상화(Virtualization) 기술은 체감 성능을 즉시 끌어올립니다 [49-51]. 나아가 React 서버 컴포넌트(RSC)를 채택하면, 데이터 페칭 및 렌더링을 서버 측에서 전담하여 클라이언트 자바스크립트 번들 크기에 0바이트를 기여하며, 클라이언트의 하이드레이션(Hydration) 비용을 완전히 제거할 수 있습니다 [9, 10, 52-54].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Virtual DOM]], [[Critical Rendering Path]], [[Fiber Architecture]], [[React Compiler]], [[React Server Components (RSC)]], [[Automatic Batching]], [[Reflow and Repaint]]
-- **Projects/Contexts:** [[Next.js]], [[React 18 & 19]], [[Single-Page Applications (SPA)]]
+- **Related Topics:** [[Virtual DOM|Virtual DOM]], [[Critical Rendering Path|Critical Rendering Path]], [[Fiber Architecture|Fiber Architecture]], [[React Compiler|React Compiler]], [[React Server Components (RSC)|React Server Components (RSC)]], [[Automatic Batching|Automatic Batching]], [[Reflow and Repaint|Reflow and Repaint]]
+- **Projects/Contexts:** [[Next.js|Next.js]], React 18 & 19, [[Single Page Applications (SPA)|Single-Page Applications (SPA)]]
 - **Contradictions/Notes:** 
   - 상태 업데이트 병합 시, React 18의 자동 배칭(Automatic Batching)이 기본 적용되지만 폼 입력 등 즉각적인 반영이 필수적인 경우 `flushSync`를 사용해 배칭을 의도적으로 우회(Opt-Out)하고 DOM 업데이트를 강제할 수 있습니다 [55-57]. 
   - 수동 메모이제이션 방식(`React.memo`, `useMemo`)은 남용할 경우 비교 연산 및 메모리 저장이라는 자체적인 비용(Overhead)으로 인해 오히려 렌더링보다 더 큰 지연을 유발할 수 있다고 주장됩니다 [41]. 하지만 React 19부터 도입된 React Compiler는 이를 빌드 도구가 정적 분석을 통해 자동으로 최적화해 주어, 오버-메모이제이션의 함정 없이 성능을 보장할 수 있다고 설명합니다 [11, 44, 58].