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

10_Wiki/Topics/Frontend_Mastery/React 성능 최적화.md

@@ -1,7 +1,7 @@
-# [[React 성능 최적화]]
+# [[React 성능 최적화|React 성능 최적화]]
 
-## 📌[[ brief]] Summary
-React 성능 최적화는 불필요한 리렌더링을 방지하고 번들 크기를 줄여 애플리케이션의 로딩 속도와 상호작용 반응성을 향상시키는 일련의 과정입니다 [1, 2]. 주요 원인인 리렌더링 캐스케이드와 큰 초기 자바스크립트 번들을 해결하기 위해 메모이제이션, 코드 분할, 가상화 등의 기술이 활용됩니다 [1-5]. 최근에는 [[React 18]]의 자동 배칭([[Automatic Batching]])과 동시성(Concurrent) 기능, [[React 19]]의 자동 메모이제이션을 지원하는 [[React Compiler]]가 도입되어 성능 최적화 작업이 더욱 자동화되고 효율적으로 발전하고 있습니다 [6-9].
+## 📌 Brief Summary
+React 성능 최적화는 불필요한 리렌더링을 방지하고 번들 크기를 줄여 애플리케이션의 로딩 속도와 상호작용 반응성을 향상시키는 일련의 과정입니다 [1, 2]. 주요 원인인 리렌더링 캐스케이드와 큰 초기 자바스크립트 번들을 해결하기 위해 메모이제이션, 코드 분할, 가상화 등의 기술이 활용됩니다 [1-5]. 최근에는 [[React 18|React 18]]의 자동 배칭(Automatic Batching)과 동시성(Concurrent) 기능, React 19의 자동 메모이제이션을 지원하는 [[React Compiler|React Compiler]]가 도입되어 성능 최적화 작업이 더욱 자동화되고 효율적으로 발전하고 있습니다 [6-9].
 
 ## 📖 Core Content
 * **성능 저하의 주요 원인**: 부모 컴포넌트의 상태 변경 시 속성(props) 변경 여부와 관계없이 모든 자식 컴포넌트가 다시 렌더링되는 '리렌더링 캐스케이드(Re-Render Cascade)'가 가장 일반적인 원인입니다 [1]. 또한 대규모 자바스크립트 번들로 인한 초기 로드 지연, 렌더링 시마다 실행되는 무거운 데이터 연산, 인라인 객체 및 함수 생성 등도 성능을 저하시킵니다 [2, 10, 11].
@@ -10,15 +10,15 @@ React 성능 최적화는 불필요한 리렌더링을 방지하고 번들 크
   * **메모이제이션 (Memoization)**: `React.memo`, `useMemo`, `useCallback`을 사용하여 변경되지 않은 속성에 대한 불필요한 리렌더링을 방지합니다 [4, 12].
   * **리스트 가상화 (Virtualization)**: 화면에 수천 개의 항목이 있는 리스트를 렌더링할 때, 뷰포트에 보이는 항목과 약간의 버퍼만 실제 DOM 노드로 렌더링하여 DOM 크기와 렌더링 시간을 대폭 단축합니다 [5, 13].
   * **DOM 구조 최적화**: React Fragment(`<></>`)를 사용하여 구조를 위한 불필요한 래퍼(wrapper) DOM 노드 추가를 방지하고 누적 레이아웃 이동(CLS) 지표를 향상시킵니다 [14, 15].
-  * **렌더링 전략 활용 (SSR, SSG, RSC)**: 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 도입해 자바스크립트 실행 전 초기 화면 표시 속도를 높입니다 [10, 16, 17]. 특히 [[React Server Components]](RSC)는 클라이언트 번들에 자바스크립트를 전혀 포함하지 않고 서버에서 독점적으로 실행되어 상호작용 속도를 크게 높입니다 [18-20].
+  * **렌더링 전략 활용 (SSR, SSG, RSC)**: 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 도입해 자바스크립트 실행 전 초기 화면 표시 속도를 높입니다 [10, 16, 17]. 특히 [[React Server Components|React Server Components]](RSC)는 클라이언트 번들에 자바스크립트를 전혀 포함하지 않고 서버에서 독점적으로 실행되어 상호작용 속도를 크게 높입니다 [18-20].
 * **React 버전별 최적화 기능의 진화**:
-  * **React 18**: 여러 상태 업데이트를 하나로 묶어 리렌더링을 최소화하는 '자동 배칭(Automatic [[Batching]])'이 네이티브 이벤트뿐만 아니라 비동기 작업에도 기본 적용되었습니다 [7, 21, 22]. 또한, `[[useTransition]]`과 `[[useDeferredValue]]` 훅을 통해 무거운 연산이 메인 스레드를 차단하지 않고 렌더링을 지연시킬 수 있는 동시성(Concurrent) 기능이 도입되었습니다 [6, 23, 24].
+  * **React 18**: 여러 상태 업데이트를 하나로 묶어 리렌더링을 최소화하는 '자동 배칭(Automatic [[Batching|Batching]])'이 네이티브 이벤트뿐만 아니라 비동기 작업에도 기본 적용되었습니다 [7, 21, 22]. 또한, `useTransition`과 `[[useDeferredValue|useDeferredValue]]` 훅을 통해 무거운 연산이 메인 스레드를 차단하지 않고 렌더링을 지연시킬 수 있는 동시성(Concurrent) 기능이 도입되었습니다 [6, 23, 24].
   * **React 19 (React Compiler)**: 개발자가 수동으로 작성하던 메모이제이션을 빌드 타임에 AST(추상 구문 트리)를 분석하여 자동으로 처리해 주는 컴파일러가 도입되었습니다 [8, 9, 25]. 이를 통해 개발자는 코드의 유지보수성을 높이면서도 세밀한 반응성(fine-grained reactivity)을 확보할 수 있습니다 [8, 26].
-* **측정 기반의 최적화**: 직관에 의존하는 대신 React DevTools Profiler, [[Lighthouse]] 등 측정 도구를 활용하여 실제 렌더링 병목 지점과 [[Core Web Vitals]] 지표를 먼저 파악한 후 최적화를 진행해야 합니다 [27-31].
+* **측정 기반의 최적화**: 직관에 의존하는 대신 React DevTools Profiler, [[Lighthouse|Lighthouse]] 등 측정 도구를 활용하여 실제 렌더링 병목 지점과 [[Core Web Vitals|Core Web Vitals]] 지표를 먼저 파악한 후 최적화를 진행해야 합니다 [27-31].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Virtual DOM]], [[Core Web Vitals]], [[React Compiler]], [[React Server Components]], [[Automatic Batching]]
-- **Projects/Contexts:** [[Next.js]], [[Meta Quest Store]] (React Compiler를 제품에 적용하여 초기 로드 12% 및 상호작용 속도 2.5배 개선 [32]), [[Sanity Studio]] (React Compiler 적용으로 렌더링 시간 20-30% 단축 [33])
+- **Related Topics:** [[Virtual DOM|Virtual DOM]], Core Web Vitals, React Compiler, [[React Server Components|React Server Components]], [[Automatic Batching|Automatic Batching]]
+- **Projects/Contexts:** [[Next.js|Next.js]], Meta Quest Store (React Compiler를 제품에 적용하여 초기 로드 12% 및 상호작용 속도 2.5배 개선 [32]), [[Sanity Studio|Sanity Studio]] (React Compiler 적용으로 렌더링 시간 20-30% 단축 [33])
 - **Contradictions/Notes:** 여러 소스에 따르면 메모이제이션(`useMemo`, `useCallback`, `React.memo`)은 리렌더링 방지에 강력한 도구이지만, 프로파일링 측정 없이 모든 컴포넌트에 무분별하게 적용할 경우 오히려 연산 오버헤드와 메모리 사용량을 가중시켜 애플리케이션의 성능을 저하시키는 원인(안티 패턴)이 될 수 있다고 공통적으로 경고합니다 [12, 34].
 
 ---