Virtual DOM

1.브라우저의동작

DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성

render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성

Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정

Paint (repaint) : 실제 화면에 그리기

문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것

SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김,

그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다.

DOM 의 사본, 복사본이라고 할 수 있다.

진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 api는 가지고 있지않다.

html에 클래스 같은것들을 오브젝트 형태로, 자바스크립트 객체로 표현한다.

let domNode = {
tagName:"ul",
attributes:{id:'items'},
children:[
{}
]
........

}

자바스크립트 객체를 활용하고, 실제 DOM이아닌 메로리상에서 동작한다.

그리고 실제 렌더링이 되지않아 연산 비용이 적다.

모든 변화를 묶어 딱 한번만 실행한다.

DOM fragment에 변화를 묶어서 적용시키고, 기존 DOM에 던져주는 과정

이것을 자동화 & 추상화 한것이다.

대표적인 가상돔을 사용하는 라이브러리

UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화

이 과정을 재조정 이라고한다.

JSX?
html태그처럼 생겼지만, 자바스크립트 확장문법

모든 React dom 오브젝트는 그에 대응하는 Virtual dom 오브젝트가 있다.

하나하나 맵핑이 되어 작동한다.

Virtual돔이 업데이트되면 Virtual돔 스냅샷과 비교하여 정확히 바뀐 Virtual돔을 바꾸었는지 확인한다.

이 과정을 Diffing 알고리즘이라고한다.

element의 속성값만 바뀐경우에는 속성값만 업데이트하고

element의 태그 또는 컴포넌트가 변경된 경우 해당 노드를 포함한 하위 모든 노드를 unmount후

새로운 virtual DOM으로 대체한다.

그리고 마지막에 딱한번 실제 DOM에 업데이트한다.

그렇지는 않다. 정보 제공만 하는 페이지라면 인터랙션이 발생하지 않아 일반 돔이 좋을 수 도 있다.

하지만 SPA에서는 보통 큰 규모의 웹사이트가 많아, 돔조작이 많다. 이런경우에는 버츄얼돔이 좋을 수있다.

- 참고한 사이트