Virtual DOM(가상 DOM)

❓Virtual DOM(가상 DOM) ❓

웹 애플리케이션에서 UI 업데이트를 효율적으로 처리하기 위해 사용하는 개념이다.

 

Virtual DOM은 브라우저의 실제 DOM(Document Object Model)을 추상화한 JavaScript 객체로, 변경 사항을 효과적으로 반영하고 성능을 최적화하는 역할을 한다.

 

📌 Virtual DOM의 주요 개념 📌

1️⃣ DOM의 문제점

브라우저의 실제 DOM은 매우 복잡하며, 변경할 때마다 성능 비용이 많이 든다.

DOM의 요소를 변경하면 브라우저는 전체 페이지의 재렌더링을 수행해야 하므로, 대규모 애플리케이션의 경우 성능 저하를 야기할 수 있다.

 

2️⃣ Virtual DOM의 원리

Virtual DOM은 실제 DOM의 가벼운 복사본이다.

 

JavaScript로 메모리 내에서 유지되며, 변경 사항이 있을 때 Virtaul DOM에서 먼저 변화가 일어난다.

그 변화를 계산하여 실제 DOM에 최소한의 변경만을 반영하는 방식이다.

 

3️⃣ Diffing 알고리즘

Virtual DOM은 실제 DOM과 차이점을 확인하기 위해 'Diffing 알고리즘'을 사용한다.

이 알고리즘은 두 Virtual DOM 트리의 차이를 비교하고, 최소한의 변경만을 실제 DOM에 적용한다.

 

이 과정을 통해서 성능을 향상시킬 수 있다.

 

4️⃣ Reconciliation(재조정)

변경 사항이 발생하면, Virtual DOM은 이전 상태와 새로운 상태 비교한 후, 변경이 필요한 부분만 실제 DOM에 적용하는 과정을 거치는데, 이를 Reconciliation이라고 한다.

 

✅ Virtual DOM의 장점 ✅

1️⃣ 성능 최적화

Virtual DOM은 실제 DOM에 접근하는 횟수를 줄여 성능을 최적화한다.

변경된 부분만 실제 DOM에 반영하기에, 전체 DOM을 다시 렌더링할 필요가 없다.

 

2️⃣ 선언형 UI

Virtual DOM은 UI 업데이트를 선언적으로 처리한다.

개발자는 상태 변화만 신경쓰면 되고, UI 업데이트는 프레임워크가 효율적으로 처리한다.

 

대표적으로 React가 Virtual DOM을 사용하여 상태 변화에 따라 UI를 효율적으로 업데이트한다,.

 

3️⃣ 브라우저 호환성

Virtual DOM은 브라우저의 동작과 무관하게 작동하므로, 다양한 브라우저 간의 차이를 추상화할 수 있다.

따라서 크로스 브라우징 문제를 줄이는 데 도움을 준다.

 

🚫 Virtual DOM의 단점 🚫

1️⃣ 추가적인 메모리 사용

실제 DOM의 복사본인 Virtual DOM을 메모리에 유지하기에, 메모리 사용량이 늘어날 수 있다.

하지만, 이 비용은 대개 성능 이점으로 상쇄된다.

 

2️⃣ 비용 발생

Diffing 알고리즘과 Virtual DOM에서 실제 DOM으로의 변환 과정에서 약간의 비용이 발생할 수 있다.

하지만 이는 일반적으로 전체 애플리케이션 성능 향상에 큰 도움을 준다.

 

⭐️ 프레임워크에서의 Virtual DOM 예시 ⭐️

React와 Vue.js에서 Virtual DOM을 사용하는 방식은 매우 유사하지만, 자세하게 살펴보도록 하자.

 

React에서 Virtual DOM

React는 상태가 변경될 때마다 새로운 Virtual DOM을 생성하고, 변경된 부분을 실제 DOM에 반영하여 성능을 최적화한다.

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('React!');

  const updateMessage = () => {
    setMessage('Message changed!');
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={updateMessage}>Change Message</button>
    </div>
  );
}

export default App;

 

위 코드를 살펴보면 다음과 같다.

• message는 useState를 사용해 상태 관리를 한다.
• <p>{message}</p>는 message 상태에 따라 UI를 렌더링한다.
• 버튼을 클릭하면 updateMessage 함수가 호출되어 message의 값이 변경되고, React는 새로운 Virtual DOM을 생성한다.
• React의 diffing 알고리즘은 새로운 Virtual DOM과 이점 Virtual DOM을 비교하여 <p> 태그의 텍스트가 변경되었음을 감지한 후, 변경된 부분만 실제 DOM에 반영한다.

 

React에서 Virtual DOM의 동작 원리

• 상태 변경 감지: React의 useState와 같은 상태 관리 hook을 통해 상태가 변경되면, 컴포넌트가 다시 렌더링된다.
• Virtual DOM 생성: 상태가 변경될 때마다 새로운 Virtual DOM이 생성된다.
• Diffing 알고리즘: React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만 찾는다.
• DOM 업데이트: 실제 DOM에서 필요한 부분만 업데이트하여 성능을 최적화한다.

 

Vue.js에서 Virtual DOM

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">Change Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Vue.js!'
  },
  methods: {
    updateMessage() {
      this.message = 'Message changed!';
    }
  }
});

 

위 코드를 살펴보면 다음과 같다.

• {{ message }}는 Vue의 템플릿 문법으로, message 데이터에 바인딩된다.
• 버튼을 클릭하면 updateMessage 메서드가 호출되어 message 값이 업데이트된다.
• Vue는 message의 값이 변경되었음을 감지하고, Virtual DOM을 사용해 업데이트된 DOM 요소만 실제 DOM에 반영한다.
  • 즉, <p>{{ message }}</p> 부분만 다시 렌더링되고 나머지 DOM 요소는 변경되지 않는다.

 

Vue.js에서 Virtual DOM의 동작원리

• 상태 변화 감지: Vue는 반응형(Reactive) 시스템을 사용해 컴포넌트의 상태 변화를 감지한다. 데이터가 변경되면 컴포넌트는 다시 렌더링된다.
• Virtual DOM 생성: 상태가 변경되면 Vue는 컴포넌트의 새로운 Virtual DOM을 생성한다.
• Diffing 알고리즘: 이전 Virtual DOM과 새로운 Virtual DOM을 비교해 변경된 부분만 계산합니다.
• DOM 업데이트: 비교 후, 실제 DOM에서 변경이 필요한 부분만 업데이트하여 성능을 최적화합니다.

 

Vue.js에서 Virtual DOM 처리 방식 특징

• 반응형 시스템과 결합: Vue는 데이터의 변화를 실시간으로 감지하는 반응형 시스템과 Virtual DOM을 결합하여 효율적으로 상태 변화를 처리한다.
• 컴포넌트 기반 아키텍처: Vue는 각 컴포넌트마다 자체적인 Virtual DOM 트리를 생성하므로, 상태 변화가 발생할 때마다 해당 컴포넌트만 업데이트된다. 이를 통해 성능을 극대화할 수 있다.

 

React의 Virtual DOM vs Vue의 Virtual DOM

React와 Vue는 모두 Virtual DOM을 사용하지만, 몇 가지 차이가 있다.

• 구현 방식: React는 setState나 useState를 통해 상태를 관리하고 이를 기반으로 Virtual DOM을 업데이트합니다. Vue는 반응형 시스템을 사용해 상태 변화를 감지하고, Virtual DOM을 갱신합니다.
• 렌더링 전략: React는 전체 컴포넌트를 다시 렌더링한 후, Virtual DOM을 통해 필요한 부분만 실제 DOM에 반영합니다. 반면, Vue는 컴포넌트 수준에서 반응형으로 상태를 감지해 특정 부분만 업데이트합니다.