1.DOM (Document Object Model)
DOM은 HTML, XML 또는 다른 문서를 프로그래밍 언어에서 사용할 수 있는 구조로 변환하는 인터페이스를 제공하는 표준이다.
//html의 예제
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>유저가 웹사이트에 접속하게 되면 브라우저는 자동으로 HTTP GET request를 해당 서버에 보내고 서버는 응답으로 html을 보내준다.
그 응답을 받은 웹 브라우저는 html을 파싱하여 프로그래밍 언어로 조작할 수 있게 아래와 같은 DOM트리를 구축하게 된다.
DOM은 문서의 실제 구조를 반영한다. HTML문서의 각 엘리먼트, 속성 등이 노드로 표현되어있고 이를 통해 개발자들은 문서 구조를 조작할 수 있게된다.
(주로 Javascript를 이용하지만 다른 언어로도 조작 할 수 있다.)
2.가상 DOM (Virtual DOM)
가상 DOM은 실제 DOM을 추상화한 가상의 모델이다. 실제 DOM의 경량화 된 복사본으로, 변경 사항을 추적하고 실제 DOM에 최소한의 업데이트만을 적용하는데 사용된다.
이 가상 DOM이란걸 처음 마주치게 되는게 대부분 리액트를 사용할때 마주치게 된다.
이 가상 돔의 작동원리는 다음과 같다.
1. 초기에 실제 DOM과 동일한 구조를 가진 가상 DOM을 만든다.
2. 어플리케이션 상태가 변경되면 가상 DOM과 현재 DOM을 비교하여 변경된 부분을 찾는다.
3. 변경된 부분만을 업데이트한 후, 이를 가상 DOM에 적용한다.
4. 최종적으로 가상 DOM을 사용하여 변경된 부분만을 실제 DOM에 적용한다.
예를들어 일반 DOM에서는 여러 변경사항이 발생할때 브라우저는 이 변경사항을 즉시 처리하게된다. 그럼 변경사항이 발생할때마다 레이아웃을 다시 계산하고 여러번의 리플로우와 리페인트가 발생할 수 있다.
하지만 가상 DOM은 이런 문제를 최소화 하기 위해 변경사항을 일괄 처리하게 되고 불필요한 리플로우와 리페인트를 최소한으로 발생시켜 성능을 향상시킬 수 있다.
