Virtual DOM 개념

 

Virtual DOM

: UI 업데이트등 웹 성능을 최적화하기 위해 실제 DOM의 가벼운 사본을 메모리에서 관리하는 프로그래밍 개념입니다. 주로 React와 같은 프레임워크에서 사용되며, DOM 조작의 비효율성을 줄이고 빠른 UI 렌더링을 가능하게 합니다.

 

---

 

Virtual DOM의 작동 원리

1. Virtual DOM 생성
   • 애플리케이션 상태가 변경되면, Virtual DOM이 메모리에서 새로 생성됩니다.
   • 이는 실제 DOM의 가상 표현으로, JavaScript 객체로 구현됩니다.
2. Virtual DOM 비교 (Diffing)
   • 새로운 Virtual DOM과 이전 Virtual DOM을 비교(diffing)하여 변경된 부분을 찾습니다.
3. 최소한의 변경만 적용
   • 실제 DOM에 필요한 변경 사항만 업데이트(patching)하여 효율적으로 UI를 렌더링합니다.

---

Virtual DOM의 주요 단계

1. 렌더링(Rendering)

• UI를 나타내는 Virtual DOM 트리를 생성합니다.
• 예를 들어, React에서는 컴포넌트의 render() 함수가 Virtual DOM을 반환합니다.

2. 변경 비교(Diffing)

• 이전 Virtual DOM과 새 Virtual DOM을 비교하여 변경된 부분만 찾습니다.
• React의 Reconciliation 과정에서 이루어집니다.

3. DOM 업데이트(Patching)

• 변경된 부분만 실제 DOM에 반영하여 브라우저가 다시 렌더링하도록 합니다.
• 전체 DOM을 다시 렌더링하지 않으므로 성능이 크게 향상됩니다.

---

Virtual DOM의 장점

1. 성능 최적화
   • 변경된 부분만 DOM에 적용하므로, 전체 DOM을 다시 렌더링하지 않아 성능이 향상됩니다.
   • 특히, DOM 조작이 빈번한 애플리케이션에서 효율적.
2. 프로그래밍 단순화
   • 개발자는 UI 상태만 관리하고, Virtual DOM이 변경 사항을 처리하므로 복잡성을 줄여줍니다.
3. 크로스 브라우저 호환성
   • Virtual DOM은 브라우저와 독립적으로 동작하며, 브라우저 간의 DOM 처리 차이를 신경 쓰지 않아도 됩니다.
4. Reactivity (반응성)
   • 상태(state)나 속성(props) 변경 시 자동으로 Virtual DOM이 갱신되어 개발 편의성이 높아집니다.

---

Virtual DOM의 단점

1. 추가적인 계산 비용
   • Virtual DOM을 생성하고 diff 알고리즘을 수행하는 데 추가적인 CPU 리소스가 필요합니다.
   • 단, 전체 DOM을 직접 조작하는 것보다는 더 효율적입니다.
2. 메모리 사용
   • Virtual DOM은 메모리에서 객체로 유지되므로, 메모리 사용량이 증가할 수 있습니다.
3. 극단적인 DOM 조작
   • DOM 조작이 매우 적거나 단순한 애플리케이션에서는 Virtual DOM의 이점이 미미합니다.

 

---

Virtual DOM의 실제 사용 예시

React에서의 Virtual DOM

=> React는 Virtual DOM을 기반으로 상태(state)와 속성(props)의 변경에 따라 UI를 효율적으로 업데이트합니다.

 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

 

 

1. 초기 상태: count = 0일 때 Virtual DOM이 생성됩니다.
2. 상태 변경: setCount(count + 1)을 호출하면 새로운 Virtual DOM이 생성됩니다.
3. Diffing: 기존 Virtual DOM과 비교하여 변경된 <h1>의 내용만 실제 DOM에 업데이트합니다.

---

Virtual DOM vs 실제 DOM

특징	Virtual DOM	Actual DOM
성능	변경 사항만 비교 후 업데이트하여 빠름	전체 DOM을 다시 그리므로 느림
UI 업데이트	JavaScript 객체에서 메모리 내에서 처리	브라우저에서 직접 DOM 트리를 수정
브라우저 의존성	독립적	브라우저의 구현 및 성능에 의존
개발 편의성	상태 관리에 집중 가능	복잡한 DOM 조작 로직 필요

 

---

Virtual DOM은 언제 유용한가?

• DOM 조작이 빈번한 대규모 애플리케이션.
• 상태 기반으로 UI가 동적으로 변하는 애플리케이션.
• 여러 브라우저와 호환성을 유지하면서도 성능을 극대화해야 하는 프로젝트.

Virtual DOM은 웹 애플리케이션의 성능 최적화와 개발 생산성을 동시에 만족시키기 위해 도입된 중요한 기술입니다. 😊