개발이야기

🚀 렌더링 최적화: Virtual DOM, Incremental DOM, Signal 비교 및 Angular의 변화

diarmay 2025. 2. 14. 13:34

렌더링 최적화는 UI 성능을 개선하고 불필요한 연산을 줄이는 핵심 기술이다. 본 글에서는 Virtual DOM, Incremental DOM, Signal을 비교하고, Angular가 어떻게 렌더링 방식을 최적화하고 있는지 살펴본다. 과연 리엑트는 올바른 길을 가고 있는 것인가.

 

1️⃣ Virtual DOM: 기존의 렌더링 방식

✅ 개념

  • Virtual DOM(VDOM)은 실제 DOM의 가상 복사본을 생성하여 변경 사항을 비교한 후 최소한의 업데이트만 반영하는 방식이다.
  • React가 주로 사용하는 방식이다.

🔹 동작 방식

  1. 상태가 변경되면 새로운 Virtual DOM을 생성.
  2. 기존 Virtual DOM과 비교(Diffing)하여 변경된 부분을 찾음.
  3. 변경된 부분만 실제 DOM에 업데이트(Reconciliation).

⚡ 장점

✅ 브라우저 DOM 조작을 최소화하여 성능 최적화
✅ 선언형 UI를 유지하며 업데이트 가능

🚨 단점

❌ Virtual DOM 비교(Diffing)로 인한 성능 부담
❌ 전체 컴포넌트 리렌더링 가능성 (React의 useMemo, React.memo 등으로 최적화 필요)

2️⃣ Incremental DOM: Virtual DOM을 대체하는 방식

✅ 개념

  • Virtual DOM과 달리, Incremental DOM은 기존 DOM을 직접 업데이트하는 방식이다.
  • Google의 Angular Ivy, Lit 등에서 사용된다.

🔹 동작 방식

  1. 요소가 렌더링될 때 기존 DOM을 수정하는 코드 자체를 유지.
  2. 변경이 필요한 경우, 해당 DOM 부분만 직접 수정.

⚡ 장점

✅ Virtual DOM 비교 과정이 없어서 더 빠름
✅ 필요할 때만 UI를 업데이트

🚨 단점

❌ DOM 업데이트 로직이 복잡해질 가능성
❌ 일부 최적화가 필요할 수도 있음

3️⃣ Signal: Fine-Grained Reactivity(세밀한 반응성)

✅ 개념

  • Signal은 상태(State) 변경이 발생한 부분만 직접 업데이트하는 방식이다.
  • Virtual DOM과 Incremental DOM 없이 필요한 UI만 자동 업데이트한다.
  • React의 useState와 유사하지만, 컴포넌트 전체가 아닌 연관된 부분만 업데이트한다.

🔹 동작 방식

  1. 특정 상태(Signal)를 추적.
  2. 상태 값이 변경되면 사용된 곳만 자동 업데이트.

⚡ 장점

✅ 불필요한 렌더링 없이 빠르게 업데이트
✅ Virtual DOM과 비교해 성능이 뛰어남

🚨 단점

❌ 기존 React 생태계와 호환성이 낮음
❌ 일부 라이브러리는 지원이 제한적 (예: Preact Signals, SolidJS, Angular Signals)

4️⃣ Angular의 렌더링 최적화 변화

Angular는 점진적으로 Zone.js → Incremental DOM → Signal 기반으로 진화하고 있다.

Angular 버전렌더링 방식

초기 Zone.js를 사용하여 변경 감지 (컴포넌트 단위 렌더링)
Angular 9+ (Ivy) Incremental DOM을 도입하여 Virtual DOM 없이 렌더링 최적화
Angular 16+ Signals 도입하여 Fine-Grained Reactivity 지원

🚀 최신 Angular(16+)의 최적화된 렌더링 흐름

1️⃣ 기본적으로 Incremental DOM을 사용하여 변경된 부분만 업데이트
2️⃣ Zone.js 없이 Signal을 사용하면 컴포넌트 전체가 아니라 필요한 부분만 업데이트 가능

🔹 Angular Signal 예제

import { Component, Signal, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>{{ count() }}</p> <!-- count()가 변경될 때만 업데이트 -->
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count: Signal<number> = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

✔ Signal 덕분에 Zone.js 없이도 자동으로 변경된 부분만 UI 업데이트!

5️⃣ 결론: 어떤 방식이 가장 최적화된 방식일까?

방식 동작 방식 최적화 수준 사용 예시
Virtual DOM 변경 사항을 비교하여 최소한의 업데이트 적용 중간 React
Incremental DOM 기존 DOM을 직접 수정 높음 Angular Ivy, Lit
Signal 필요한 부분만 직접 업데이트 매우 높음 Preact Signals, SolidJS, Angular Signals

✅ Virtual DOM은 여전히 널리 사용되지만, 성능 개선을 위해 Incremental DOM과 Signal이 점점 더 주목받고 있다.
✅ Angular는 기존 Incremental DOM을 유지하면서, Signal을 활용해 더욱 최적화된 상태 관리가 가능해졌다.

📌 결론: 🚀 렌더링 최적화의 핵심은 불필요한 UI 업데이트를 줄이는 것! Signal과 Incremental DOM은 가장 최신의 최적화된 방식이다.

728x90
반응형