React Virtual DOM

DOM

W3C DOM (Document Object Modal) 표준은 3가지의 종류가 있습니다.

1. Core DOM
2. HTML DOM
3. XML DOM

DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요서를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

DOM은 이렇게 HTML 파일 내용을 토대로 만들어지는데, Javscript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현입니다.

// DOM에 접근하는 Javascript 예시
document.getElementsByTagName("태그명");

/// DOM 코드
<ul class="fruits">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

---

Virtual DOM

브라우저 렌더링의 원리는 이러합니다.

Response files -> DOM Tree -> CSSOM(DOM + CSS) Tree -> Render Tree

DOM이 수정되면 이러한 브라우저 렌더링 과정을 다시 한번 걸쳐야 합니다.
1000번의 수정이 이루어진다면 이러한 렌더링 과정을 1000번을 다시 거쳐야 한다는 겁니다.
이러한 과정은 비효율적이었으며 이러한 상황을 해결하기 위해 Virtual DOM이 탄생했습니다.

Virtual DOM은 하나의 가상 레이어입니다. Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않습니다. 변경사항들을 모두 모아뒀다가 한 번에 DOM으로 보냅니다. 그러면 DOM은 딱 한 번만 UPDATE를 하면 되고, 그러면 render도 한 번만 해주면 되는 겁니다.

// Virtual DOM representation
{
  type: "ul",
  props: {
    "class": "fruits"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "Apple"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Orange"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Banana"
      ]
    }
  ]
}

하지만 Virtual DOM의 작동 원리는 하나의 레이어를 더 거쳐가는 동작이기 때문에, DOM 조작이 많지 않다면 당연하게도 DOM을 직접 조작하는 것보다는 느립니다.

동작 원리

Virtual DOM은 수정사항이 여러 가지 있더라도, 한 번의 재렌더링을 일으킵니다.
즉, Virtual DOM을 이용한 CRUD 작업들을 모두 모아서 실제 DOM에 한 번에 보내줍니다.

빨간 부분에 수정사항이 생겼다면, Virtual DOM은 알아서 달라진 값을 탐지하여 변경하고 최종 결과물을 실제 DOM에게 전달합니다. 만약 Virtual DOM이 없었다면, DOM은 렌더링을 처음부터 해야 했기 때문에 모든 동그라미가 빨간색으로 바뀌었을 겁니다.

직접적인 DOM에 대한 접근은 지양해야 합니다.

이는 DOM에 직접 접근해도 문제가 되진 않지만, DOM이 직접 변경된다면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있습니다. 따라서 최대한 DOM에 직접적으로 접근하지 말아야 합니다.

출처 : MJ Kim
출처 : woohm402.log
출처 : Taeuk.log