[React] 가상 DOM의 개념과 DOM 과의 차이에 대해

가상 DOM (Virtual DOM)

 

설명

 

• 가상 DOM은 React와 같은 라이브러리나 프레임워크에서 사용되는 개념으로, UI의 효율적인 업데이트를 위해 활용
• 가상 DOM은 실제 DOM의 가벼운 복제본으로, React 컴포넌트의 상태 변화에 따라 가상 DOM이 업데이트
• JavaScript 객체로써 메모리에 존재하며, 실제 DOM과는 독립적으로 작동
• 상태 변화가 발생하면 React는 이전 가상 DOM과 현재 가상 DOM을 비교하여
  실제 DOM에 반영해야할 변경 사항을 파악하고, 변경사항이 있는 부분만을 선택적으로 실제 DOM에 반영
• 가상 DOM을 사용하면 성능 개선과 동시에 개발자가 UI업데이트를 쉽게 관리 가능

 

---

 

필요한 이유

 

성능 향상

 

• 실제 DOM 조작은 비용이 많이 발생
• DOM에 직접 접근하여 변경하면 웹 브라우저는 변경 사항을 처리하고 다시 레이아웃을 계산하여 업데이트한다.
• 가상 DOM은 변경 사항이 있는 부분만을 선택적으로 실제 DOM에 반영하여,
  불필요한 DOM 조작을 최소화하며 성능을 향상

 

효율적인 업데이트 관리

 

• 가상 DOM은 React와 같은 라이브러리나 프레임워크에서 UI 업데이트를 관리하는데 사용
• 상태 변화에 따라 가상 DOM이 업데이트되고, 변경 사항을 실제 DOM에 반영하여, 상태를 업데이트 함으로써 UI 관리
• 가상 DOM은 업데이트를 배치 처리하여 여러 변경 사항을 한 번에 처리할 수 있으므로, 효율적인 업데이트 관리 가능

 

큰 규모의 애플리케이션 관리

 

• 가상 DOM은 복잡한 애플리케이션에서도 유용
• 대규모 애플리케이션에서는 UI 업데이트가 빈번하게 발생 가능, 이에 따른 DOM 조작은 성능 문제를 야기할 수 있다.

 

크로스 플랫폼 호환성

 

• 가상 DOM은 플랫폼에 독립적
• React와 같은 라이브러리는 가상 DOM을 사용하여 여러 플랫폼에서 동일한 개발 경험을 제공
• 코드의 재사용성과 개발 생산성을 향상

 

---

 

DOM과 가상 DOM 차이

 

	DOM	가상 DOM
비용	비용 많이 발생	사용한 부분 만큼 발생
변경 처리 방법	페이지의 변경 사항을 처리하고 다시 레이아웃 계산 후 업데이트	변경 사항의 상태를 가상 DOM에서 비교하고 선택적 업데이트
사용하는 규모 범위	비교적 작은 애플리케이션	큰 규모의 애플리케이션

 

---

 

DOM 예시

 

// 실제 DOM을 직접 조작하는 예시

// <div> 요소 생성
const divElement = document.createElement('div');
divElement.textContent = 'Hello, DOM!';
document.body.appendChild(divElement);

// <div> 요소의 스타일 변경
divElement.style.color = 'red';

 

 

가상 DOM 예시

 

import React, { useState } from 'react';

const MyComponent = () => {
  const [text, setText] = useState('Hello, Virtual DOM!');
  const [color, setColor] = useState('red');

  const handleClick = () => {
    setText('Updated Text');
    setColor('blue');
  };

  return (
    <div>
      <p style={{ color }}>{text}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
};

export default MyComponent;

 

 

---