[DOM과 가상 DOM] 웹페이지는 어떻게 바뀌는가?

728x90

 DOM과 가상 DOM 

웹 페이지는 사용자의 상호작용에 따라 콘텐츠가 실시간으로 바뀌는 경우가 많습니다. 이런 변화는 브라우저가 DOM(Document Object Model)을 내부적으로 조작하는 방식으로 일어납니다. 하지만 DOM은 생각보다 무겁고 느릴 수 있기 때문에, 이를 최적화하기 위한 아이디어로 가상 DOM(Virtual DOM) 이 등장했습니다.

이 글에서는 실제 DOM과 가상 DOM이 무엇인지, 어떻게 다르고, 왜 필요한지를 자세히 설명합니다.

 

---

1.  DOM이란 무엇인가?

DOM(Document Object Model) 은 HTML 문서를 브라우저가 구조화한 트리 형태의 객체 모델입니다. 자바스크립트는 이 DOM을 이용해 웹 페이지의 내용을 동적으로 제어할 수 있습니다.

예시 : 

<p id="greeting">Hello</p>

자바스크립트로 DOM에 접근 :

document.getElementById('greeting').textContent = 'Hello, World!';

 

---

2.  DOM의 한계

DOM은 강력하지만 몇 가지 문제점이 있습니다.

• 느림 : DOM 조작은 브라우저의 렌더 트리에 영향을 주기 때문에 리렌더링 비용이 큽니다.
• 직접 조작이 복잡함 : 어떤 변경이 필요한지 스스로 계산해야 합니다.
• 전체 렌더링 위험 : 자주 업데이트되면 성능 저하 가능성이 증가합니다.

이런 한계를 극복하기 위한 방법으로 나온 것이 가상 DOM(Virtual DOM) 입니다.

 

---

3.  가상 DOM(Virtual DOM)이란?

“필요한 부분만 바꿔주는 똑똑한 중간 관리자”

가상 DOM은 실제 DOM의 메모리 내 추상적 복제본입니다. 프레임워크(예: React)는 상태 변화가 생기면 가상 DOM을 새로 생성하고, 이전 가상 DOM과 비교한 뒤 차이점만 실제 DOM에 반영합니다. 이 전체 과정을 Reconciliation이라고 하며, 내부적으로는 diffing과 patching 단계로 구성됩니다.

용어 설명

• diffing : 변경 전 가상 DOM과 변경 후 가상 DOM을 비교해 어떤 부분이 바뀌었는지 차이(diff) 를 계산하는 과정입니다. React는 효율적인 비교를 위해 자체 알고리즘을 사용합니다.
• patching : diffing 결과를 바탕으로 실제 DOM에 변경 사항을 적용하는 단계입니다. 전체를 다시 그리지 않고, 필요한 부분만 업데이트합니다.
• Reconciliation : 상태(state)나 props가 변경되었을 때, React가 새로운 가상 DOM을 만들고 diffing → patching → 실제 DOM 반영까지 수행하는 전체 알고리즘 및 프로세스를 말합니다. 성능 최적화를 위해 다양한 전략이 포함됩니다.

React에서 가상 DOM은 어떻게 작동할까?

1. 상태(state)가 변경됨
2. 새로운 가상 DOM 트리를 생성
3. 이전 가상 DOM과 diffing (차이 계산)
4. 변경된 부분만 patching (실제 DOM에 반영)

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Click: {count}</button>;
}

• 이 컴포넌트는 클릭할 때마다 새로운 가상 DOM이 생성되지만, 실제 DOM은 숫자 부분만 바뀌게 됩니다.

 

---

4.  실제 DOM vs 가상 DOM 비교

항목	실제 DOM	가상 DOM
정의	HTML 문서를 객체 트리로 표현	실제 DOM의 메모리 내 복제
조작 방식	직접 변경	상태 변경 → diff → 최소 변경 적용
성능	변화 많을수록 느림	변화 많아도 최소 렌더링으로 빠름
사용 예	Vanilla JS, jQuery 등	React, Vue 등 최신 프레임워크

 

---

5.  가상 DOM이 항상 좋은 걸까?

가상 DOM은 대부분의 상황에서 성능 향상에 도움을 주지만, 무조건 빠르진 않습니다.

• 변경이 거의 없거나 DOM이 단순한 경우 : 직접 조작이 더 빠를 수도 있음
• 매우 빈번한 상태 업데이트 시 : 불필요한 re-render 가능성 있음

따라서 성능 최적화를 위해선 React.memo, shouldComponentUpdate, useMemo 같은 기법도 병행해야 합니다.

 

---

6.  마무리

• DOM은 웹 페이지의 구조를 나타내는 객체 모델로, 자바스크립트로 조작 가능함
• 가상 DOM은 실제 DOM의 추상화된 복사본으로, 성능을 위해 변경사항만 최소 반영
• React 같은 프레임워크는 가상 DOM을 이용해 효율적인 UI 업데이트를 지원함

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Document Object Model (DOM)

블로그 글 :

[브라우저 렌더링 과정] HTML이 화면에 보이기까지

[브라우저 렌더링 성능 최적화] 렌더링 지연 최소화 전략

[렌더링 병목] 웹페이지가 느려지는 이유

 

---