virtual DOM과 shadow DOM

#Javascript

[원본 링크]

virtual DOM과 shadow DOM은 브라우저 동작의 비효율성과 불편함을 개선하기 위해 나온 구조다.

DOM (Document Object Model)

그럼 돔이 뭔가?

html에 의해 선언되고, 자바스크립트로 제어되는 브라우저 웹 페이지의 요소들을 말한다.

그냥 html이라고 생각하면 된다.

웹표준 초기스펙으로 나온 것들이 대부분 그렇듯이, 이것도 나사빠진채로 만든거라 문제가 매우 많았다.

가장 큰 단점은 매우 느리다는 것이었다. 특히 잦은 변경의 일어나는 상태 처리에 대한 부분이 매우 구렸다.

이에 대한 대안으로 나온것이 VDOM이라는 개념이다.

게다가 뭔가 컴포넌트 단위로 모듈화를 하는 것도 한계가 많았다.
예를 들면, CSS를 보라. 전역적으로 정의되고 모든 DOM 요소에 사이드이펙트를 터뜨린다.

이런걸 해결하기 위해 나온게 shadow DOM이다.

V-DOM (Virtual DOM)

가상돔은 라이브러리 수준의 솔루션이다.

React를 위시로 한 대부분의 현대적인 프론트엔드 프레임워크들이 가상돔에 기반해서 요소를 관리한다. (Svelte를 제외하고)

DOM이 너무 구리니까 DOM을 믿지 않고, 자체적인 v-DOM을 구현해서 그걸로 상태를 제어하다가 진짜 변경이 필요한 상황에만 real-DOM에 접근하도록 하는 것이다.

https://dev.to/iamusj/what-is-the-virtual-dom-2e0a
대체로 잘 동작하고, 큰 문제는 없다.

Shadow DOM

반면 Shadow DOM은 웹표준 수준에서 제공하는 솔루션이다.
V-DOM과는 목적이나 사용형태가 좀 다르다. 이건 렌더링 성능과는 관계가 없다. 캡슐화를 위한 것이다.

iframe의 대체재로서 제공되며, DOM 구조를 캡슐화된 채로 정의하고 사용할 수 있게 해준다.

듣자하니 웹 프레임워크인 Svelte에서 이걸 적극적으로 사용한다고 한다.

사용형태는 아래와 같다.
진짜 DOM 별개로 Shadow DOM Tree를 정의한다.
그리고 필요할때 Shadow DOM을 진짜 DOM에 합쳐서 표현하는 것이다.

shadow DOM 내부의 모든 코드는 격리되어서, 외부 DOM에 영향을 주지 않는다.
이런 격리성이 가장 중요한 부분이다.
css마저도 style를 동적으로 생성하면 shadow DOM 내에 격리되게 할 수 있다.

아래는 그에 대한 간단한 사용례다.

<HTML>

<body>
    <h1>HELLO!</h1>

    <div id="elementRef"></div>
    <script>
        const elementRef = document.getElementById('elementRef');
        const shadowRoot = elementRef.attachShadow({ mode: 'open' });

        const para = document.createElement('p');
        para.textContent = 'Hello from shadow DOM!';
        shadowRoot.appendChild(para);
    </script>
</body>

</HTML>

먼저 shadow root를 배치할 Element를 하나 둬야 한다. 그게 저기서 elementRef라는 div다.
attachShadow로 shadow DOM을 생성하고, 거기다가 늘상 하듯이 DOM 추가들을 해주면 그만이다.

그럼 아래와 같이 작동할 것이다.

더 자세한 것은 공식문서를 참조하면 좋겠다.
https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_shadow_DOM

참조
https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_shadow_DOM