Virtual DOM의 진짜 역할은 뭐지?

면접 스터디를 진행하다가 많은 사람들이 Vitual DOM이 하는 일을

"정말 변경사항이 일어난 부분만 Real DOM에 반영해주기 위한 기술"이라고 대답을 했다.

 

물론 맞는 말이긴한데 살짝 설명이 부족하다고 생각을 한다.

"Virtual DOM의 꽃은 변경사항을 한번에 모아서 Real DOM에 렌더링하여 렌더링 비용을 절감시키기위한 기술" 이라고 생각하기 때문이다.

 

실제로 우아한테크코스의 마지막 과제로 나만의 UI 라이브러리를 수행한적이있다.

Virtual DOM의 기능을 어느정도 구현하면 되었다.

 

나는 createNodeIterator 라는 document의 내장 메서드를 사용하여 DOM 객체를 순회하였는데,

변경사항이 일어나면, 실제 DOM과 업데이트 하려는 DOM간의 비교를 통해서 변경사항이 일어난 부분만 replaceWith 내장 메서드를 통해서 교체해버릴 수 있었다.

 

Virtual DOM을 사용하려고 하지 않았음에도 말이다.

 

그때부터 Virtual DOM의 진짜역할은 무엇인가에 대해서 진지하게 고민을 하게 되었고,

앞서 말한 2번의 개념이 Virtual DOM의 진짜 역할이라는 생각이 들었다.

 

그래서 일정시간동안 실제 변경사항들을 디바운스로 모아 100ms이후에 Real DOM에 반영하도록 구현을 했고, 내가 원하는대로 동작을 했다.

 

공식문서에 정확한 정의는 내려있지 않으며,

많은 블로그에서 Virtual DOM을 1번처럼 소개하기도하고

https://velopert.com/3236 민준님 말 처럼 브라우저 내에서 발생하는 렌더링 연산의 비용을 줄이기 위해서라고 소개하기도 한다.

 

개인적으로 DOM의 변경사항이 생기면, 메모리상의 가상의 DOM인 Virtual DOM에 변경사항들을 모두 변경하고, 그 변경사항들을 한번에 Real DOM에 반영함으로써 렌더링 연산을 획기적으로 줄이는 것이 Virtual DOM의 역할이라고 생각한다.

 

즉, "실제로 변경된 사항만 렌더링하도록 하는것"은 뭔가 부족한 설명같다.

"변경사항을 한번에 모아서 반영하므로, 렌더링 비용이 적게든다."라는 설명이 들어가는게 옳지 않을까?

 

---

수정

 

Vitrual DOM 그 자체의 정의로는 앞서 말한

"정말 변경사항이 일어난 부분만 Real DOM에 반영해주기 위한 기술"이 적절하고,

 

Virtual DOM으로 어떻게 성능이 개선되냐라고 물었을때

"변경사항을 한번에 모아서 Real DOM에 렌더링하여 렌더링 비용을 절감시키기위한 기술" 이라고 말하는 것이 옳다.