Virtual DOM이 뭔가요?

virtual DOM에 공부한 내용을 정리한 글입니다.

먼저, virtual DOM에 앞서서 DOM이 무엇이고, 가상 DOM이 나온 배경을 공부하기 위해
브라우저 로드 과정에 대해 짚고 넘어가겠습니다.

브라우저 렌더링 과정

 

출처: 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361

브라우저는 아래의 단계로 로딩합니다.

1. HTML을 파싱하여 DOM 객체 트리를 구성하고, 외/내부 css를 파싱하여 CSSOM 트리를 구성합니다.
2.  DOM 트리와 CSSOM트리가 생성되면 스타일을 매칭시켜주는 과정을 거쳐 렌더트리를 구성합니다.
    - 페이지를 렌더링 하는데 필요한 노드만을 가집니다.
    - 예를 들어 display:none인 속성을 가진 노드는 렌더트리에서 제외됩니다.
3. 렌더트리를 기준으로 레이아웃을 배치하고 렌더트리를 화면의 픽셀로 변환(페인트)합니다.
   - 레이아웃 단계에서는 노드의 정확한 위치와 크기를 계산합니다.
   - 페인트 단계에선 위치와 관계없는 CSS속성을 적용합니다.

현재 web은 점점 더  복잡하고 대규모인 형태로 가고 있습니다. 이 의미는 DOM의 조작이 아주 빈번하게 일어난다는 뜻입니다. 브라우저는 렌더링 과정에서 가장 큰 성능 저하를 가져옵니다. 그렇기 때문에 모든 변경 사항이 발생할 때마다 DOM을 직접 수정하면 불필요한 렌더링이 발생하거나 페이지 반응성이 저하될 수 있습니다. 이 점을 해결하기 위해 Virtual DOM의 개념이 나왔습니다.

Virtual DOM

가상 DOM은 실제 DOM과 동일한 구조를 갖고 있으며, 변경 사항이 발생하면 이를 가상 DOM에 반영합니다. 그리고 모든 변경 사항이 한번에 가상 DOM에 적용된 후, 실제 DOM과 비교해 변경된 부분만 최소한의 연산으로 브라우저를 렌더링합니다. 이렇게 함으로써 불필요한 렌더링을 줄이고 성능을 향상시킬 수 있습니다.

 

여기서 리액트는 항상 두 개의 가상돔 객체를 가지고 있습니다.

리액트는 state가 변경되면 리렌더링이 발생합니다. 변경 전 가상돔과 변 경 후 가상돔을 비교해서 어떤 요소가 변했는지 파악합니다. 이러한 과정을 Diffing이라고 합니다. 

그리고 그 요소들만 실제 DOM을 적용하게 되는데 이 과정을 Reconciliation(재조정)이라고 합니다.

이러한 변화된 모든 요소들을 한 번에 처리하는 Batch 작업을 통해서 더욱 효율적으로 렌더링을 수행합니다.

이렇게 가상DOM을 활용함으로써 불필요한 렌더링을 최소화하고 성능을 향상 시킬 수 있습니다.

 

---

참고자료

https://d2.naver.com/helloworld/59361

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

https://www.youtube.com/watch?v=gc-kXt0tjTM