Virtual DOM 을 왜 빠르다고 하는가

리액트가 좋대, 리액트가 빠르대... 
virtual DOM 때문에 속도가 빠르다더라.

라는 주변인들의 소리에 리액트에 관심이 간 건 사실이다.

virtual DOM은 무엇이고 왜 필요한지 명확히 짚어 보고 나아가기로 했다.

virtual DOM은 리액트가 만들어낸 개념은 아니지만 리액트로 인해 활성화된 개념이라고 할 수 있다. 

virtual DOM은 말 그대로 가상 DOM이다. ( 가상이라니...? 그럼 DOM이 현실?.. &@&@& ) 
이 virtual DOM이 무엇인지 알기 위해서는 먼저 DOM이 무엇인지 알아야 하고 
DOM을 이해하기 위해서는 웹페이지가 만들어지는 과정을 알아야 한다. 

 

웹페이지가 만들어지는 과정 

// 웹 페이지가 만들어지는 과정 보러 가기 

 

DOM

DOM의 개체 구조는  위와같은 “노드 트리”로 표현됩니다.

노드를 건들게 되면 리플로우/리페인트가 발생한다. 즉 노드 가 변경될 때마다 DOM TREE, CSSOM TREE, RENDER TREE, 레이아웃, 페인트, 합성의 과정이 일어난다. 변경 건수가 많아질수록 브라우저는 많은 연산을 해야 하기 때문에 자연스럽게 프로세스에 부하가 생길 수밖에 없다. ( 모바일 브라우저라고 생각하면 그만큼 CPU 가 많은 일을 해야 하기 때문에 배터리도 더 빨리 소모되겠죠?.) 

페이스북, 트위터 같은 유명한 소셜 네트워크 사이트에서는 밑으로 스크롤링을 할 때 수만 개의 노드를 건든다고 한다. 스크립트를 최적화하거나 계교를 부려 어느 정도 해결할 수는 있겠지만, 그 큰 페이지와 역동적인 UI를 다루는데 DOM을 직접 조작하는 건 효율적이지 않아 보인다. 

이러한 DOM을 직접 조작하는 방식 대신 나온 개념이 바로 virtual DOM이다. 

 

Virtual DOM

virtual DOM은 가상의 객체가 메모리에 유지되고 변경사항만이 실제 DOM과 동기화되는 프로그래밍 개념이다.

virtual DOM의 특징은 다음과 같다.

1. 실제 DOM의 가벼운 복사본이다.

2. virtual DOM은 in-memory에 존재해서 렌더링 과정은 생략되어 연산 비용이 적다. 

새 요소가 UI에 추가되면 트리로 표시되는 가상 DOM이 작성된다. 각 요소는 트리의 노드이다. 이러한 요소의 상태가 변경되면 새 가상 DOM 트리가 작성된다. 그런 다음이 트리를 이전 가상 DOM 트리와 비교한다.

이 작업이 완료되면 가상 DOM은 실제 DOM을 변경하기 위한 가장 좋은 방법을 계산한다. 이를 통해 실제 DOM에 대한 작업이 최소화된다. 따라서 실제 DOM을 업데이트하는 데 드는 성능 비용이 줄어든다.

 

DOM TREE

 

위의 DOM TREE는 아래와 같은 자바스크립트 객체로 표현된다. 

virtual DOM 은 자바스크립트 객체이기 때문에 실제 DOM에 대한 조작으로 부터 자유로울 수 있습니다.  

 

변경이 일어나면 변경 내용이 적용된 virtual DOM의 복사본을 아래와 같이 만듭니다.  

변경이 완료되면 리액트는 이 virtual DOM과 virtual DOM "snapshot" ( 업데이트가되기 전의 virtual DOM )을 비교한다. 

 

 

이 과정을 통해 virtual DOM의 어떤 객체가 변경되었는지 알 수 있게 된다. ( 이 과정을 "diffing"이라 한다 ) 

 

 

비교를 통해 변경된 객체만을 선별하여 실제 DOM에 있는 해당 객체에 접근하여 일괄 업데이트를 한다.

 loop를 돌며 자식을 추가하거나 업데이트를 한다.

 

내용이 변경된 텍스트 노드만 업데이트 됩니다.

 

결론

가상 DOM을 사용하여 변경된 내용을 찾고 이를 통해 전체 DOM을 바꾸는 대신 변경 사항만 실제 DOM에 적용하는 virtual DOM의 방식은 DOM을 직접 건드는 방식보다 효율적으로 보인다. 

하지만 virtual DOM은 실제 DOM보다 무조건 빠르다고는 할 수 없다. 
가상 DOM을 만드는 과정, 비교하는 과정, 실제 DOM에 적용하는 과정도 다 비용이기 때문에 직접 DOM을 변경하는 방식이 더 효율적일 때가 있다. 

Redux 창시자이자 React 개발팀원인 Dan Abramov 는 트윗에서 React가 DOM보다 빠르다는 것은 잘못된 사실이라고 얘기했다. 덧붙여 리액트는 유지보수가 가능한 애플리케이션을 만드는 것을 도와주고 대부분은 충분히 빠르다고 얘기했다. 

즉 리액트는 유지보수에 강점이 있고 속도도 충분히 빠르므로 페이스북에서 채택하고 사용한다는 것이다. 
virtual DOM이라고 무조건 DOM보다 빠르다는 것은 아니라는 것이다.

노드의 변화가 많이 없는 정적인 사이트에서는 굳이 리액터를 사용할 필요가 없다는 사람들도 많다. 
그리고 최적화 작업을 (제대로 ) 손수 했을 때 리액터를 사용 사용했을 때보다 빠르다고 한다. 

하지만 이 작업을 자동화한 리액트는 생산성에서 우위가 있고 충분히 빠르므로 사람들에게 사랑받는 것 같다. 

 

 

 

 

 

참고자료 : 
https://programmingwithmosh.com/react/react-virtual-dom-explained/

https://velopert.com/3236

https://www.codecademy.com/articles/react-virtual-dom

https://ko.reactjs.org/docs/rendering-elements.html