가상돔(Virtual DOM)과 증가돔 (Incremental DOM)

가까운 미래에 Virtual Dom 이 Incremental Dom으로 대체될 것이다.

1. Virtual DOM (가상돔)

리액트를 공부하다 가상 Dom을 들어보게 된다.

리액트의 UI 퍼포먼스는 가상 Dom을 통해 비약적으로 향상되었다. SPA 특성상 돔 트리를 변경할 일이 많다. 30개를 변경하면 30번 변경되는 실제 DOM 과 달리 가상DOM은 전체적인 UI를 그리고 실제 DOM과 비교하여 다른 부분을 찾아 한 번만 변경해준다. (실제 DOM 자체가 느린 것은 아니다. CSS 를 다시 연산하고 reflow , repaint를 하는 과정에서 시간이 많이 허비되는 것이다.)

1. 변경 된 사항을 Virtual Dom 으로 그린다.
2. Virtual DOM과 실제 DOM 을 비교한다.
3. 변경된 사항을 DOM에 적용시킨다.

가상돔이 실제돔에 적용하는 방법은 리액트의 알고리즘 이모저모 (diffing, Heuristic) - 현재는 Fiber라는 알고리즘을 통해 적용한다 - 에 정리한 적이 있다.

2. Incremental DOM (증가돔)

증가 Dom 은 구글에서 채택한 방안이다. 왜 구글은 증가Dom을 채택했을까?

구글은 하나의 목표를 가지고 있다. 애플리케이션은 모바일 디바이스에서도 좋은 성능을 가져야한다는 목표다. 이는 주로 2가지의 최적화를 의미한다. 번들 크기와 메모리의 사용량이다.

why Incremental DOM ?

• Incremental DOM은 컴포넌트를 분석하지 않는다.

컴포넌트의 명령을 참고하는데, 그 특정 명령이 없다면 절대 사용되지 않는다. 컴파일 할 때 이 사실을 알고 있기 때문에 번들 크기를 줄일 수 있다.

• DOM 이 변화가 없다면 재랜더링을 위한 어떠한 메모리도 사용하지 않는다.

가상 돔과 같은 경우는 재랜더링 시마다 레이아웃을 반영한 tree를 그린다. 그렇기 때문에 메모리를 많이 차지하는데 증가형 돔은 추가되거나 삭제한 내역만 메모리에 반영한다.

Reference |

Incremental DOM과 Virtual DOM 비교
(Angular) Incremental DOM