JS_Virtual DOM

Virtual DOM

앞서 DOM에서는 자바스크립트를 이용해 DOM 객체를 제어하고 이를 통해 클라이언트와 상호작용을 할 수 있는 웹 페이지를 구현할 수 있다고 하였다.

---

DOM이 있는데 굳이 Virtual DOM이라는 개념이 나오게 된 배경을 먼저 살펴보자.

jQuery가 등장하면서 JS를 이용해 AJAX 개발을 용이하게 하고 DOM을 동적으로 조작해 많은 기능을 수행할 수 있는 웹 페이지들이 등장하였다.

하지만, 트위터, 페이스북과 같이 스크롤을 조금만 조작해도 몇 천개의 elemennt 들이 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 성능 저하를 야기시켰고, 모바일 브라우저 환경에서는 더욱 취약했다.

 

또한, 당시 jQuery를 이용한 개발 방법이 MVC 등의 데이터 모델들을 이용해 개발을 진행한 것도 또 하나의 이유라고 한다.

DOM은 데이터를 Tree 구조로 보여주기에 알맞을 순 있으나, 객체지향으로 사용하기는 어려웠기 때문이라고 한다.

따라서 유지보수는 어렵고, 직접적으로 데이터와 UI를 연결시키기 또한 어려웠다고 한다.

 

이 같은 이유로 인해 Google의 Augular, FaceBook 의 React 등 Virtual DOM을 활용한 프레임워크 들이 등장하였다.

---

즉,

대규모의 서비스를 빠르고 효율적으로 제공하기 위해

더 자세하게는 DOM 프로세서의 성능 저하로 인한 브라우저의 과부하

이유로 Virtual DOM이 등장했다고 이해하면 좋을 것 같다.

---

앞서 DOM에서 아래와 같은 Webkit 엔진을 예시로 들었었다.

각각 DOM, CSSOM Tree로 스타일 요소를 입히는 Attachment가 일어나고 

랜더 트리가 생성 된후

LayOut (reflow라고 불린다) 각 노드들을 스크린의 어느 좌표에 나타낼지 위치를 정하고

Painting 랜더링된 요소에 색을 입히고 클라이언트에게 보여지게 된다.

즉, 랜더링이 일어난다.

출처 : https://velopert.com/3236

출처: https://elmprogramming.com/virtual-dom.html

수 천, 수 만개의 element가 사소한 이벤트하나로 모두 새로 그려진다면 당연히 비효율적일 것이다.

가능한 최소한의 요청으로 DOM을 다시 그릴 수 있게끔 도와주는 것이 Virtual DOM이라 생각해도 된다.

---

Virtual DOM이란?

Virtual DOM은 DOM을 메모리에 추상화하여 저장한 것을 말한다.

이때 Virtual DOM은 로컬에 생성시키고 DOM을 변경하는 요청을 DOM보다 먼저 받아들인다.

Virtual DOM은 변화가 일어나면 오프라인 DOM Tree(Virtual DOM)에 적용시킨다.

이 트리는 랜더링 되지 않기 때문에 연산 비용이 적다

출처 : https://programmingwithmosh.com/react/react-virtual-dom-explained/

 

DOM을 변경하는 요청이 10개라면 1개의 요청을 받아 Virtual DOM에 적용시키고 이때 화면을 그리지 않은 상태로 나머지 9개의 요청을 모두 받아 Virtual DOM에 적용 시킨다.

DOM 변경 요청을 모두 적용되었다면 DOM과 비교하여 변경사항이 있다면 변경된 부분만을 업데이트한다.

참고 : Virtual DOM GIthub Repo(https://github.com/Matt-Esch/virtual-dom)

(tag, attribute 등의 DOM element들이 갖는 내용들을 모두 추상화하여 객체들로 표현한다는 것을 알 수 있다. )

 

Virtual DOM은 로컬에 Virtual DOM을 생성시키고 브라우저에서 Rende를 요청하기 전에 변경 사항을 

 

트위처와 페이스북의 사례를 보면 DOM이 느리기에 Virtual DOM이 등장하였다고 생각할 수 있다.

(나 또한 그렇게 생각했었다)

하지만 정확하게는 DOM의 성능 저하가 아닌 DOM을 다시 그리고 스크린에 띄우는 일

련의 과정(랜더링)이 비효율적이기 때문에 Virtual DOM이 등장하였다.

 

---

실제로 Virtual DOM이 DOM 보다 더 빠른가???

리액트 수석 개발자의 답변이다!

출처 : https://velopert.com/3236

번역: React가 DOM 보다 빠르다는건 잘못된 사실이에요.
사실은: 유지보수 가능한 어플리케이션을 만드는것을 도와주고 그리고 대부분의 경우에 ‘충분히 빠르다’

위 질문에서 답은,

Virtual DOM이 빠르다라고 생각하기 쉽지만 정답은 아니다이다.

(아래에서 추가로 설명하겠지만 속도만 본다면 Virtual DOM이 더 느리다고 할 수 있다.)

Virtual DOM의 경우 유지보수 가능한 어플리케이션을 만드는것을 도와주고

그리고 대부분의 경우 "충분히 빠르기" 때문에 사용한다고 한다. 

 

Virtual DOM, DOM 모두 페이지에 그려야하는 내용이 많은 수록 느려지는 것은 둘다 마찬가지이다.

하지만 Virtual DOM의 경우,

탐색을 Virtual DOM, DOM 총 2번을 수행해야 하기 때문에

브라우저 랜더링 횟수를 줄여줄뿐 실제로는 더 느리다고 한다.

심지어 메모리도 2배로 사용한다.

하지만 일반적인 웹 페이지에서 성능이 소요되는 일은 거의 없으며, 개발 편의성을 위해 Virtual DOM을 많이 사용한다.

 

---

실제로 Reack와 같은 라이브러리를 사용하지 않고 직접 DOM 최적화 작업을 진행하여 사용했을때는

React(Virtual DOM) 보다 더 빠르다고 한다.

하지만 React를 사용하는게 생산성은 더 좋을 것이다.

개발자가 DOM의 구조를 신경쓰면서 코드를 작성하고 최적화에

최대한 덜 신경 쓸수 있도록 React가 보조한다고 말할 수 있다.

---

Virtual DOM을 사용하지 않고 최적화하는 방법

사실 Virtual DOM 없이도 위와 같이 DOM 변화를 하나로 묶어 기존 DOM에 전달하는 방식이 존재한다!!

기존 DOM의 fragment를 직접 관리하는 방법이다.

document.createDoucmentFragment

---

그럼에도 불구하고 Virtual DOM을 사용하는 이유는 무엇일까?

위 코드와 같이 DOM fragment를 관리하여 Virtual DOM과 같은 기능을 수행하게 할 수 있다.

하지만, 이러한 과정은 수동으로 하나하나 작업해야한다.

또한, 이 작업은 개발자가 어떤 값이 변경되었고 어떤 값이 변경되지 않았는지를 계속 파악하고 있어야한다. 

파악하고 있지 않다면 굳이 수정할 필요가 없는 DOM 트리를 수정하는 불필요한 연산이 발생할 수 있다.

 

즉, Virtual DOM이 어떤 요소가 어떻게 바뀌었는지, DOM을 변경해야하는지 등 이같은 작업을

모두 자동으로 관리해주기 때문에 개발자는 크게 신경쓰지 않고 개발을 할 수 있다. 

Virtual DOM이 알아서 변경사항을 기억하고 수행해주기 때문이다.

수동으로 최적화하는 작업을 할경우 Virtual DOM을 사용하는 것 보다 빠를 수 있다고

이야기한 근거가 여기서 나오게 되는 것이다.

마치 ORM의 역할과 굉장히 비슷하다는 생각이 든다.

---

Virtual DOM Flow

실제로는 훨씬 복잡하다고 하지만 대략적인 흐름을 한번 알아보자.

https://medium.com/@js_tut/react-animated-tutorial-7a46fa3c2b96

- 변경사항 발생

- ReactDOM.render() 가 호출됨

- 변경점을 찾는 과정과 변경점을 실제 UI에 적용하는 과정으로 나뉜다.

- React는 브라우저의 DOM에 전달하기 전 Virtual DOM에서 Reconciliation(재조정)이라는 비교 과정을 선행한다.

(이때 React의 diff 알고리즘으로 동작한다고 한다. ==> 해당 알고리즘 필터 관련 기능에 취약하다고 한다.)

- Reconciliation 과정을 선행하기 때문에 UI에 대한 제어를 최소화 시킨다.

- Render가 진행될때마다 각 element들은 key를 부여받고 해당 key를 통해 element라 인식되어 비교가 된다.

- 만약 DOM과 Virtual DOM의 차이가 발견된다면 DOM을 다시 그리는 랜더링 과정이 일어나고 브라우저에 표시된다.

---

출처 및 참고 :

https://velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

https://ryublock.tistory.com/41

DOM과 Virtual DOM

https://wangchunsik.tistory.com/15

Virtual DOM

https://medium.com/@js_tut/react-animated-tutorial-7a46fa3c2b96

React Tutorial