Antigravity Agent
5.2 KiB
5.2 KiB
“React가 빠른 이유”
📌 Brief Summary
React가 빠른 핵심적인 이유는 메모리 상에 가벼운 가상 DOM(Virtual DOM)을 두어, 브라우저의 무거운 렌더링 작업인 레이아웃(Reflow)과 페인트(Repaint)를 유발하는 실제 DOM 조작을 최소화하기 때문입니다 [1, 2]. 더불어 O(n) 복잡도의 휴리스틱 Diffing 알고리즘 [3], 렌더링 작업을 잘게 쪼개 우선순위를 관리하는 Fiber 아키텍처 [4, 5], 여러 상태 업데이트를 한 번에 묶어 처리하는 자동 일괄 처리(Automatic Batching) [6, 7] 등의 최적화 기술이 결합되어 불필요한 연산을 막고 애플리케이션의 반응성을 극대화합니다.
📖 Core Content
- 가상 DOM(Virtual DOM)과 휴리스틱 Diffing 알고리즘 실제 DOM을 직접 수정하는 것은 브라우저의 Critical Rendering Path(레이아웃 및 페인트)를 거쳐야 하므로 본질적으로 매우 느립니다 [1]. 이를 해결하기 위해 React는 UI 상태를 메모리에 가벼운 객체 형태로 표현하는 가상 DOM을 도입했습니다 [1, 2]. 재조정(Reconciliation) 단계에서 이전 가상 DOM과 새로운 가상 DOM을 비교할 때, React는 두 요소의 타입이 다르면 트리를 완전히 새로 구축하고, 같은 타입이면 변경된 속성만 업데이트하는 O(n) 복잡도의 휴리스틱 알고리즘을 사용합니다 [3, 8, 9]. 이를 통해 실제 DOM 노드를 최대한 보존하며 꼭 필요한 최소한의 부분만 효율적으로 업데이트합니다 [1, 10].
- Fiber 아키텍처와 동시성 렌더링(Concurrent Rendering) 초기 React의 동기적이고 차단되는(Blocking) 렌더링 프로세스 한계를 극복하기 위해 도입된 Fiber 아키텍처는 렌더링 작업을 'Fiber 노드'라는 작은 단위로 쪼갭니다 [4, 5, 10]. 이 아키텍처는 렌더링을 중단 및 재개 가능한 'Render 단계'와 동기적으로 DOM을 변이하는 'Commit 단계'로 분리합니다 [11, 12]. 사용자 입력과 같은 긴급한 작업에 우선순위(Lane 모델)를 부여하여 먼저 처리할 수 있도록 제어권을 브라우저에 양보하므로, 복잡한 업데이트 중에도 UI가 멈추지 않고 매끄럽게 동작합니다 [4, 13, 14].
- 자동 일괄 처리(Automatic Batching) React 18부터 적용된 자동 일괄 처리는 이벤트 핸들러, Promise, setTimeout 등 모든 출처에서 발생하는 다수의 상태 업데이트를 단일 리렌더링으로 묶어서(Batch) 처리합니다 [6, 7, 15]. 이는 가상 DOM의 Diffing 연산 횟수를 최소화하고, CPU 작업량과 실제 DOM의 재렌더링을 크게 줄여 성능을 향상시킵니다 [16].
- React Compiler를 통한 렌더링 폭포(Re-render Cascade) 방지 부모 컴포넌트의 상태가 변할 때 props 변경 여부와 상관없이 모든 자식이 재렌더링되는 현상은 React 성능 저하의 주된 원인입니다 [17]. React 19의 컴파일러는 빌드 타임에 AST(추상 구문 트리)를 분석하여 데이터 흐름을 파악하고, 불필요한 재렌더링 및 비싼 계산을 건너뛰도록 최적의 메모이제이션(Memoization) 코드를 자동으로 삽입하여 처리 속도를 대폭 높입니다 [18-21].
- React Server Components (RSC)의 도입 무거운 렌더링 로직이나 데이터 페칭 작업을 브라우저(클라이언트)가 아닌 서버에서 독점적으로 실행하게 합니다 [22, 23]. 이를 통해 클라이언트로 전송되는 JavaScript 번들 크기를 사실상 0바이트로 줄이고, 상호작용하기까지의 시간(INP)을 획기적으로 낮춰 초기 렌더링 속도와 체감 성능을 향상시킵니다 [24-26].
🔗 Knowledge Connections
- Related Topics: Virtual DOM, Reconciliation, Fiber Architecture, Automatic Batching, React Compiler, React Server Components, Reflow / Repaint 최소화 방법
- Projects/Contexts: 브라우저 렌더링 과정 (HTML → CSSOM → Render Tree), 렌더링 최적화 개념 설명 자료
- Contradictions/Notes: 소스에 따르면 가상 DOM이 불필요한 실제 DOM 업데이트를 막아주기는 하지만, 가상 DOM 트리를 비교(Diffing)하는 연산 자체도 무료가 아닙니다 [27]. 따라서 가상 DOM 메커니즘 하나만으로 속도가 무조건 보장되는 것은 아니며, 'Automatic Batching'이나 컴포넌트의 불필요한 연산을 막는 'React Compiler(또는 수동 메모이제이션)' 같은 기술이 병행되어야 가상 DOM의 Diffing 오버헤드까지 잡아내어 진정한 속도 최적화를 이룰 수 있습니다 [16, 20, 27, 28].
Last updated: 2026-04-25