[React] 가상돔(Virtual DOM)이란?

리액트는 "상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS라이브러리"이다.

그리고 이를 위해 "가상DOM을 통해 변경된 부분만 효율적으로 업데이트"해주는 구조를 채택했다.

 

 돔(DOM)이란? 

가상돔을 공부하기 전에 돔의 개념부터 알아보자!

DOM(Document Object Model)은 문서 객체 모델을 의미한다.

문서 객체란 javascript가 html, head, body와 같은 태그들을 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다.

⏩DOM이란 자바스크립트가 웹 페이지를 이루는 태그들을 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

다시 말해 DOM은 HTML과 스크립팅언어(JS)를 서로 이어주는 역할을 하고 있는 것이다.

---

 가상돔의 등장 이유 

위 그림의 DOM에서 h1태그의 텍스트 색상을 바꾸고자 한다면

document.getElementById 라는 DOM 접근 메서드를 이용해야 한다.

이 방식에서는 두 가지 아쉬운 점이 존재한다.

 

1️⃣ 메모리 누수와 속도

만일 개발자가 h1태그를 찾는 코드를 변수에 저장하지 않고 매번  h1에 관련된 접근 메서드를 사용한다면 매단계마다 수 많은 document 객체들을 전부 훑으며 찾는 현상이 발생되고 이것은 곧 메모리 누수로 이어진다.

또한 h1의 변화가 일어난다면(DOM의 변화) css를 다시 연산하고 레이아웃을 구성하고 웹 페이지를 다시 그려주는 과정에서도 시간이 들 수 밖에 없다.

2️⃣ 코드량

객체를 찾기 위해 작성하는 코드가 번잡스러울 수 있다.

id라는 고유성을 침해당하지 않기위해 해당 태그의 네이밍을 정할 때 심사숙고해야할 것이고 해당 태그를 접근하기 위해 작성해야하는 메서드도 그리 짧진 않다.

 

DOM 조작에 대한 복잡도가 날이 갈수록 증가하고 있고, 복잡도가 증가한다는 것은 DOM의 변화가 기하급수적으로 많이 발생한다는 것이다.
DOM에 변경이 있을 경우 렌더트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는데
브라우저가 많은 연산을 해야하는 것은 전체적인 프로세스를 비효율적으로 만든다.
그래서 가상돔(VirtualDOM)이라는 개념이 등장하게 되었다.

---

 가상돔(VirtualDOM)이란? 

뷰(HTML)에 변화가 있을 때, 구 가상돔(Old Node)와 새 가상돔(New Node)을 비교하면서 변경된 내용만 DOM에 적용한다.
이를 통해 브라우저 내에서 발생하는 연산의 양(정확히는 렌더링 과정)을 줄이면서 성능이 개선되는 것이다.

더 쉽게 말하자면 변화를 모아서 한 번에 처리하는 일종의 Batch 작업이다.

 

 

 

앞서 말했듯이 DOM의 문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는 것이다.

즉, 30개의 노드를 하나 하나 수정한다는 것은 30번의 (잠재적인)레이아웃 재연산과 30번의 (잠재적인)리렌더링을 초래한다는 것이다.

 

가상돔은 DOM차원에서 더블 버퍼링과 같은 것이다.

변화가 일어나면 그걸 가상돔에 적용시킨다. 이 DOM 트리는 렌더링이 되지 않기 때문에 연산 비용이 적다. 연산이 끝나고 나면 그 최종적인 변화를 실제 DOM에 넘긴다. 모든 변화를 하나로 묶어서 딱! 한번!만 변화를 넘기는 것이다.

그러면 레이아웃 계산과 리렌더링의 규모는 커질 수 있겠지만 딱!! 한번!!으로 변화가 적용되어 실제 연산의 횟수를 줄일 수 있는 것이다.

 

이 과정은 가상돔 없이도 이루어질 수 있다. 변화가 있다면 그 변화를 묶어서 DOM fragment에 적용한 다음 기존 DOM에 던지면 된다.

그러면 가상돔이 해결할려고 하는 것은 무엇인가?

 

그 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업할 필요없이, 자동화하고 추상화하는 것이다.

뿐만 아니라 만약에 이 작업을 우리가 직접한다면, 수정할 필요없는 것을 업데이트하지 않기 위해 기존 값 중 어떤 것이 바뀌었고 바뀌지 않았는지 계속 파악하고 있어야한다. 

가상돔이 이걸 자동으로 해주는 것이다.

 

또한 DOM관리를 가상돔이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용하지 않아도 되고, 특정 DOM을 조작한다거나 이미 조작했다거나에 대한 정보를 공유할 필요가 없다.

즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶는 것을 가상돔이 한다는 것이다!

 

 

 

 

 

 

 

---

 

참고자료

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_1-%E1%84%80%E1%85%A1%E1%84%89%E1%85%A1%E1%86%BC%E1%84%83%E1%85%A9%E1%86%B7-virtualdom-%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5

Vanilla Javascript로 가상돔(VirtualDOM) 만들기 | 개발자 황준일

https://velopert.com/3236

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

https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

React에서의 가상돔 개념