[Web] 가상돔 (Virtual DOM) 작성해보기 (1)

이전 게시물과 이어짐

💡 가상돔(Virtual DOM) 한줄 정리!

• 가상돔은 HTML 뷰에 변화가 있을 때, 이전의 가상돔과 새로운 가상돔을 비교해 변경된 내용만 감지해 DOM에 적용하는 것을 말한다.

가상돔이 왜 필요할까?

• DOM의 변화가 급격하게 많이 발생하면, 그만큼 복잡도가 증가하게 되고, DOM의 렌더링 과정이 계속해서 반복적으로 일어나게 된다. 이는 매우 비효율적이다.
• 때문에 등장한 개념이 가상돔이다. 가상돔을 이용해 변경된 내용만 DOM에 적용해 브라우저 성능을 개선 할 수 있다.

가상돔의 특징

• 순수 객체라는 점
• 브라우저에 종속적이지 않다는 점
• 때문에 브라우저 환경이 아니더라도 사용할 수 있는 점
• 테스트에 용이하다는 점

가상돔 작성 해보기

DOM 트리 표현

• 다음과 같은 DOM 트리를 구성했다고 했을 때,

<div id="app">
  <h1>회원가입</h1>
  <form class="form">
  	<input type="text" placeholder="아이디를 입력하세요" />
  	<input type="password" placeholder="비밀번호를 입력하세요" />
    <button type="submit">저장</button>
  </form>
  <div>
    <button type="button" class="button">로그인</button>
  </div>
</div>

가상돔 표현

• 위의 구조를 가상돔으로 작성하면 다음과 같다.

function h(type, props, ...children) {
  return { type, props , children: children.flat() }
}

h('div', {id: 'app'}, 
  h('h1', null, '회원가입'),
  h('form', {className: 'form'},
    h('input', {type: 'text', placeholder: '아이디를 입력하세요'}),
    h('input', {type: 'password', placeholder: '비밀번호를 입력하세요'}),
    h('button', {type: 'submit'}, '저장')
  ),
  h('div', 
    h('button', {type: 'button', className: 'button'}, '로그인')
);

Array.flat()에 대한 참고 문서

JS 객체로 표현

• 이를 JS 객체로 표현하면 다음과 같다.

{
  "type": "div",
  "props": {
    "id": "app"
  },
  "children": [
    {
      "type": "h1",
      "props": null,
      "children": []
    },
    {
      "type": "form",
      "props": {
        "className": "form"
      },
      "children": [
        {
          "type": "input",
          "props": {
            "type": "text",
            "placeholder": "아이디를 입력하세요"
          },
          "children": []
        },
        {
          "type": "password",
          "props": {
            "placeholder": "비밀번호를 입력하세요"
          },
          "children": []
        },
        {
          "type": "button",
          "props": {
            "type": "submit"
          },
          "children": [
            "저장"
          ]
        }
      ]
    },
    {
      "type": "div",
      "props": null,
      "children": [
        {
          "type": "button",
          "props": {
            "type": "button",
            "className": "button"
          },
          "children": [
            "로그인"
          ]
        }
      ]
    }
  ]
}

위와 같이 실제 DOM 트리를 가상 DOM으로 바꾸는 작업을 해보았는데, 사실 큰 기술이라기 보다는 그저 DOM 구조를 가져다가 JS 객체로 만들어준 것이다.

참고한 글
Vanilla Javascript로 가상돔(VirtualDOM) 만들기
Virtual DOM(버추얼 돔,가상 돔)을 직접 만들어보자