리액트를 처음 접하면 듣는 용어 중 하나가 바로 Virtual DOM이다.
"리액트는 가상 돔(Virtual DOM)을 이용해서 렌더링작업을 한다"
"가상 돔을 만들면 기존의 실제 돔과 비교해서 변경이 발생한 부분만 렌더링이 일어나도록 한다."
리액트 관련 글을 읽을 때 많이 보던 문장이다.
그래서 Virtual DOM에 대해서 공부하고 어떻게 렌더링 작업이 이루어지는 건지 보고자한다.
Virtual DOM?
Virtual DOM을 처음에는 말 그대로 가상의 돔으로 실제 돔에 적용하기 전에 리액트에서 사전에 돔과 비슷한 형태를 만들어놓은 것이라 생각했다.
근데 리액트 공식문서에서는 Virtual DOM을 특정 형태의 DOM이 아닌 하나의 작업패턴이라 설명한다.
그래서 그냥 실제 돔에 적용하는 단계(commit phase) 전까지라고 생각하면 될 듯하다.
리액트는 라이프사이클을 render phase, commit phase 두 가지로 구분한다.
render phase
실제 돔에 그려지기 전 Virtual DOM을 재조정(Reconciliation)하는 구간이다.
중첩된 React Element들이 Fiber 노드로 확장되고
reconciler, scheduler를 거쳐서 가상 돔을 만들어낸다.
commit phase
재조정이 끝난 VDOM을 DOM에 적용하는 단계
완성된 VDOM이 DOM에 마운트되고 브라우저가 화면에 그리는 구간이다.
현재 리액트 v18부터는 기본적으로 render phase는 concurrent로 진행되고 commit phase는 sync로 진행된다.
render phase가 concurrent가 가능한 것은 리액트의 Fiber Algorithm을 통해 렌더링 도중 자유롭게 중지, 재실행이 가능해져
다른 작업들과 동시적으로 진행할 수 있게 되었기 때문이다.
Virtual DOM 구조
Virtual DOM은 current와 workInProgress 두개의 트리로 더블버퍼링하는 형태로 작동한다.
current는 현재 돔에 마운트된 상태이며 workInProgress는 current 트리를 복제하고 작업 중에 있는 트리이다.
workInProgress 트리는 commit Phase가 끝나면 current 트리가 된다.
Virtual DOM의 기본적인 구조만 확인했다.
후에 Fiber 노드와 함께 구체적인 과정을 설명하겠다.
"Virtual DOM 작업은 Real DOM 작업보다 빠르다"
리액트가 Virtual DOM을 사용하는 이유 중 하나이다.
하지만 virtual DOM 작업이 순수하게 더 빠르다는 의미가 아니다.
단순히 생각만 해봐도 같은 DOM작업 중간에 다른 작업을 추가하는 것인데 더 빠르다는게 말이 안된다.
가상 돔을 사용하지 않고 DOM을 직접 조작할 때, 한번의 돔 조작에 리플로우, 리페인팅이 발생한다. 그래서 돔 조작이 여러 번 발생하면 그 만큼 반복된 비용이 발생하게 된다.
반면 Virtual DOM은 가상의 돔으로 조작을 모두 끝내고 완성된 가상 돔을 실제 돔에 적용하기 때문에 리플로우, 리페인팅 작업을 최소화해줄 수 있다.
이런 이유로 복잡한 구조를 가진 작업에서는 가상 돔 작업이 더 빠르다고 말하는 것이다.
https://legacy.reactjs.org/docs/faq-internals.html
Virtual DOM and Real DOM: Understanding the Differences
Why is the Virtual DOM So Fast?
