DOM 조작 vs Virtual DOM (React 비교 포함) 정리

웹 개발에서 'DOM 조작'과 'Virtual DOM'은 중요한 개념입니다. 특히 현대 프론트엔드 프레임워크(React, Vue 등)의 기반이 되는 핵심 기술로, 이 차이를 이해하면 성능 최적화와 프레임워크 선택에도 큰 도움이 됩니다.

이 글에서는 DOM 조작과 Virtual DOM의 차이, React에서의 Virtual DOM 활용 방식까지 체계적으로 정리합니다.

---

✅ DOM(Document Object Model) 조작이란?

📌 정의

• 브라우저가 HTML 문서를 트리 형태로 구조화한 것
• JavaScript를 통해 이 DOM을 직접 조작할 수 있음

📌 기본 DOM 조작 예시

const title = document.getElementById("title");
title.textContent = "새 제목";
title.style.color = "blue";

• 요소 선택 후 텍스트 수정, 스타일 변경 등 직접 반영

📌 특징

• 즉각적이고 직관적
• 하지만 DOM은 무겁고, 조작 비용이 비쌈
• 대규모 업데이트가 발생할 경우 성능 저하 발생

---

✅ Virtual DOM이란?

📌 정의

메모리 내에 존재하는 가벼운 DOM의 가상 버전

• DOM을 직접 조작하지 않고, 메모리상 가상의 DOM 트리를 구성
• 변경 사항을 메모리에서 먼저 계산(diffing)한 후 최소한의 실제 DOM 조작만 수행

📌 동작 흐름

1. UI 상태가 변경됨
2. 새로운 Virtual DOM 트리 생성
3. 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diff)
4. 변경 사항만 실제 DOM에 적용(patch)

📌 Virtual DOM의 장점

• 불필요한 DOM 접근 최소화
• 대량의 변경 작업에도 성능 유지
• 선언형(Declarative) 프로그래밍 스타일 가능

---

✅ DOM 조작 vs Virtual DOM 직접 비교

항목	DOM 조작 (Vanilla JS)	Virtual DOM (React 등)
접근 방식	직접 DOM 변경	메모리에서 변경 계산 후 적용
성능	소규모에는 빠름, 대규모 느림	대규모에서도 안정적
코드 복잡도	Imperative (명령형)	Declarative (선언형)
관리	직접 관리 필요	상태(State) 기반 자동 관리
유지보수	어려움	용이함

---

✅ React에서 Virtual DOM 활용 방식

📌 기본 개념

• React는 상태(state)가 변경되면 새 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교하여 실제 DOM 업데이트를 최소화함

📌 React 예시

import { useState } from "react";

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

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

• count가 변경될 때, React는 내부적으로 Virtual DOM을 새로 생성하고, 변경된 부분만 실제 DOM에 적용합니다.

📌 추가 최적화: React의 Reconciliation

• key 속성 사용: 리스트 렌더링 시 효율적인 diffing 지원
• memoization: React.memo, useMemo, useCallback 등으로 불필요한 렌더링 방지

---

✅ 결론

• DOM 조작은 직접적이지만, 대규모 변경에는 부적합합니다.
• Virtual DOM은 초기 비용이 약간 있지만, 복잡한 UI 변경에도 최적화된 성능을 제공합니다.
• React, Vue, Preact 등 현대 프레임워크들은 Virtual DOM 기반으로 대규모 앱을 효율적으로 관리합니다.

작은 프로젝트에서는 직접 DOM 조작도 괜찮지만, 확장성이 필요한 경우 Virtual DOM 기반 접근이 훨씬 유리합니다.