Dom과 Virtual Dom

1. Dom(Document Object Model)

Html이나 XML 문서를 나타내는 Api
"Html 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력 받는 등의 기능들을 수행할 객체들로 실체화된 형태"

(1) Dom의 이해

브라우저(사파리, 크롬, 엣지 등)는 공장, Html은 주문서
구체적인 요소(div, main, a, p 등)를 Html 주문서에 담아서 브라우저에 보냄
=> 브라우저는 실제로 구현, 제작

(2) Dom의 조작

Dom을 사용해서 원하는대로 웹 화면을 보여주고 필요에 따라 Javascript로 Dom을 조작

• 특정 언어에 종속되지는 않음, 제어할 수 있는 대상이긴 함(Javascript 요소는 아님)
• 어떤 언어로든 라이브러리만 갖춰지면 Dom 조작 가능(파이썬의 BeautifulSoup)

=> Dom이 Api를 가지고 있어서 가능

(3) Dom 트리

"Dom 안에는 각종 Node(모든 Html 요소)들이 트리구조로 들어있음"

• CSS는 CSSOM(CSS Object Model)으로 따로 만들어짐(트리형식으로 출력, CSSOM)
  => 브라우저는 Dom트리와 CSSOM트리를 융합해서 우리가 보는 화면을 만듬

  + Bom(Browser Object Model)이란 브라우저 자체를 다루기 위한 api
  => 브라우저가 실행주체인 기능들인 window. ~, 그냥 호출하는 alert, setTimeout 등,,

2. Virtual Dom(가상 돔)

(1) Virtual Dom을 사용하는 이유

가상돔이 쓰이는 이유에 대해서는 SPA가 왜 만들어졌는지에 대한 이해가 필요
SPA를 사용하는 이유가 나와있는 자료

(2) Virtual Dom의 이해

• Dom의 구조만 간결히 흉내낸 자바스크립트 객체
  • 실제 돔은 무겁기 때문에 간략한 자바스크립트 오브젝트로 바꾼 다음, 먼저 시뮬레이션을 돌린 후, 가장 경제적으로 돔에 변화를 가하는 방법을 찾아냄
  • 돔의 형태가 바뀔 때, 원래 있던 돔과 바뀔 돔의 차이가 생기는 부분만 파악(diffing)한 후 실제 돔에 반영을 함