HTML [ DOM: DOM의 종류: Shadow DOM부터 Virtual DOM까지

DOM의 종류: Shadow DOM부터 Virtual DOM까지 정리

안녕하세요! 오늘은 웹 개발자라면 알아야 할 DOM(Document Object Model)의 종류에 대해 이야기해 보겠습니다. DOM은 HTML 문서의 구조를 표현하는 객체 모델로, 브라우저와 JavaScript가 소통하는 핵심 역할을 합니다.

특히 모던 웹 개발에서는 DOM의 다양한 변종들이 등장하면서 효율적인 개발 방법이 점점 더 중요해졌습니다. 대표적으로 많이 언급되는 Shadow DOM부터 Virtual DOM, 그리고 덜 알려진 DOM Fragment까지, 종류별로 살펴보겠습니다.

---

1. Light DOM: 우리가 아는 일반적인 DOM

Light DOM은 우리가 기본적으로 다루는 DOM입니다. HTML 문서를 읽고 렌더링하면 바로 이 Light DOM이 만들어집니다. 모든 노드가 전역적으로 접근 가능하며, DOM 트리를 직접 조작할 수 있습니다.

✅ 특징

• 브라우저가 처음 렌더링하는 DOM.
• 모든 요소가 공개적으로 노출되어 외부 스타일 및 스크립트에 영향을 받을 수 있음.
• CSS, JS가 자유롭게 접근 및 조작 가능.

🌟 예시

<div>
  <p>Hello, World!</p>
</div>

---

2. Shadow DOM: 캡슐화된 DOM

Shadow DOM은 캡슐화된 DOM으로, 외부 스타일이나 스크립트의 간섭 없이 독립적으로 작동합니다. 웹 컴포넌트(Web Components)에서 핵심적으로 사용됩니다.

✅ 특징

• 컴포넌트 내부에 DOM 구조와 스타일을 캡슐화.
• 외부 DOM과 독립적이며, 재사용 가능한 컴포넌트 제작에 유용.
• attachShadow({ mode: 'open' | 'closed' }) 메서드로 생성.

🌟 예시

const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    p { color: red; }
  </style>
  <p>This is Shadow DOM</p>
`;
document.body.appendChild(shadowHost);

---

3. Virtual DOM: 효율을 위한 가상 DOM

Virtual DOM은 React 같은 프레임워크에서 사용하는 DOM의 가상 버전입니다. 브라우저의 실제 DOM 대신 메모리에서 작동하며, 변경 사항을 추적해 필요한 부분만 업데이트합니다.

✅ 특징

• 브라우저 DOM의 가상 사본.
• 효율적인 업데이트(diffing 알고리즘)를 통해 성능 최적화.
• 주로 React, Vue 등에서 사용.

🌟 원리

1. 가상 DOM에서 변경 사항(Delta)을 감지.
2. 최소한의 변경만 실제 DOM에 반영.

---

4. DOM Fragment: 가벼운 DOM 조각

Document Fragment는 메모리 상에서만 존재하는 DOM 조각으로, 성능을 높이는 데 사용됩니다. 대량의 DOM 조작을 한 번에 처리하고, 최종적으로 DOM에 추가합니다.

✅ 특징

• DOM 트리에 포함되지 않음.
• 성능 최적화에 유리.
• 여러 노드를 한 번에 추가할 때 유용.

🌟 예시

const fragment = document.createDocumentFragment();
const div = document.createElement('div');
div.textContent = "This is a fragment";
fragment.appendChild(div);
document.body.appendChild(fragment);

---

5. Custom DOM: 사용자 정의 DOM

Custom DOM은 Shadow DOM과 함께 사용되는 웹 컴포넌트의 DOM입니다. HTML의 기존 태그를 확장하거나 새 태그를 정의할 수 있습니다.

✅ 특징

• customElements.define()로 사용자 정의 태그를 생성.
• 재사용 가능한 UI 요소를 만들기 적합.

🌟 예시

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `<p>Hello from Custom Element!</p>`;
  }
}
customElements.define('my-component', MyComponent);
document.body.innerHTML = `<my-component></my-component>`;

---

마치며

DOM은 단순히 HTML을 브라우저에서 구조화하는 데 그치지 않습니다. Shadow DOM처럼 독립성을 가진 DOM, Virtual DOM처럼 효율성을 위한 DOM, 그리고 다양한 응용 사례가 있는 Document Fragment 등은 모두 현대 웹 개발에서 필수적인 개념입니다.