bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics_Art/UI_UX_Assets/“React가 빠른 이유” 및 렌더링 최적화 개념.md
+3 -3
View File
@@ -1,4 +1,4 @@
# [[“React가 빠른 이유” 및 렌더링 최적화 개념]]
# [[“React가 빠른 이유” 및 렌더링 최적화 개념|“React가 빠른 이유” 및 렌더링 최적화 개념]]
## 📌 Brief Summary
React가 빠른 핵심 이유는 브라우저의 무거운 실제 DOM 조작을 최소화하기 위해 가벼운 메모리 내 표현인 Virtual DOM을 사용하고, 효율적인 Reconciliation(조정) 알고리즘을 통해 변경된 부분만 갱신하기 때문입니다 [1-4]. 렌더링 최적화의 근본적인 목표는 연산 비용이 높은 브라우저의 Reflow(레이아웃)와 Repaint를 줄이는 것이며 [5-7], 최근 React는 Fiber 아키텍처, 자동 배칭(Automatic Batching), React Compiler 등을 도입하여 개발자의 수동 개입 없이도 동시성 렌더링과 메모이제이션을 자동화해 UI 성능을 극대화하고 있습니다 [8-11].
@@ -22,8 +22,8 @@ React 16부터 도입된 Fiber 아키텍처는 동기식 렌더링의 한계를
기존 CSR(클라이언트 사이드 렌더링)이나 SSR(서버 사이드 렌더링) 환경에서는 클라이언트가 결국 방대한 크기의 JavaScript 번들을 다운로드하고 실행(Hydration)해야 하는 부담이 있었습니다 [45-48]. React Server Components는 서버에서 컴포넌트를 실행한 뒤 직렬화된 UI와 HTML만을 클라이언트로 스트리밍합니다 [49-51]. 결과적으로 서버 컴포넌트는 클라이언트 측 자바스크립트 번들에 0바이트를 추가하며, 브라우저의 다운로드 및 실행 부담을 없애 무거운 데이터 연산이나 정적 UI 렌더링 속도를 극대화합니다 [49, 51-53].
## 🔗 Knowledge Connections
- **Related Topics:** `[[Virtual DOM]]`, `[[Reconciliation]]`, `[[Critical Rendering Path]]`, `[[React Fiber]]`, `[[Hydration]]`, `[[Reflow and Repaint]]`
- **Projects/Contexts:** `[[React 18 Automatic Batching]]`, `[[React 19 Compiler]]`, `[[React Server Components]]`, `[[Next.js Rendering Strategies]]`
- **Related Topics:** `[[Virtual DOM|Virtual DOM]]`, `[[Reconciliation|Reconciliation]]`, `[[Critical Rendering Path|Critical Rendering Path]]`, `[[React Fiber|React Fiber]]`, `[[Hydration|Hydration]]`, `[[Reflow and Repaint|Reflow and Repaint]]`
- **Projects/Contexts:** `React 18 Automatic Batching`, `[[React 19 Compiler|React 19 Compiler]]`, `[[React Server Components|React Server Components]]`, `Next.js Rendering Strategies`
- **Contradictions/Notes:** 이전까지는 불필요한 렌더링을 막기 위해 개발자가 `useMemo`, `useCallback`, `React.memo`를 사용한 수동 메모이제이션을 구현하는 것이 필수적인 최적화 기법이었습니다 [43, 54, 55]. 그러나 React 19 컴파일러의 등장으로 이러한 수동 메모이제이션의 90% 이상이 불필요해졌으며, 컴파일러가 최적의 메모이제이션 경계를 자동으로 판단하여 적용합니다 [10, 44, 56, 57]. 단, 타사 라이브러리(Third-party library)가 렌더링마다 불안정한 참조를 반환하는 경우 컴파일러 최적화가 실패할 수 있어, 여전히 제한적인 상황에서는 수동 제어가 필요할 수 있습니다 [58, 59].
---