Virtual DOM

⚙︎ 브라우저의 작동 방식

1. DOM Tree 생성
   : 브라우저가 HTML을 전달받으면, 이를 파싱하고 DOM Node로 이루어진 DOM Tree를 만든다. 이때 각 노드는 각 HTML elemente 들과 연관된다.

2. Render Tree 생성
   : 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용하여 새로운 트리, 렌더트리를 만든다.

3. Render Tree 생성 이후
   : Attachment (Webkit에서 노드의 스타일을 처리하는 과정)
   DOM트리의 모든 노드들이 attach 메소드 실행, 스타일 정보를 계산하여 객체 형태로 반환한다.
   이 과정은 동기적이며 DOM트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다.

4. Layout (reflow)
   : 각 노드들에 스크린 좌표가 주어지고 정확히 나타나야할 위치가 주어진다.

5. Paigting
   : 렌더링 된 요소들에 색을 입힌다. 트리의 각 노드들을 거쳐가면서 paint() 함수를 호출, 스크린에 원하는 정보가 출력된다.

⚙︎ Virtual DOM

   DOM 조작의 문제는 각 조작이 레이아웃 변화, 트리 변화에따라 렌더링을 일으킨다는 것이다. 만약 30개의 노드를 하나 하나 수정하면, 30번의 잠재적 레이아웃 재계산과 리렌더링을 초래하게 될것이다.

이러한 경우 Virtual DOM은 변화가 실제 DOM에 적용되기전에 Virtual DOM에 먼저 적용시키고 최종 결과물을 DOM으로 전달해준다. 여기서 주목해야 할 점은 렌더링을 한번만 한다는 점으로 연산 횟수를 줄인다는 점이다.

이러한 과정은 Virtual DOM 없이도 이루어질 수 있다. 하지만 그렇게 할 경우 DOM fragmaent를 하나하나 관리할 필요가 있다. 뿐만 아니라 기존값 중 어떤게 변화했는지 모든 요소를 파악하고 있어야하는데 이러한 과정에서 불필요한 DOM tree를 업데이트 할 가능성이 있다.


 결론적으로 Virtual DOM을 사용하는 이유는 속도보다는 위와같은 일련과정들을 자동화해주고 DOM을 직접 관리하게 함으로써 각 변화의 동기화 작업을 거치지 않으며 모든 작업을 하나로 묶어줄 수 있는 것에 있다.