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

✔DOM

DOM(Document Object Model)은 MDN에 따르면 HTML, XML 문서의 프로그래밍 interface라고 한다. 쉽게 이해하면, 웹 페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이다.

 

 

수많은 Document의 elements를 가진 서비스들이 계속해서 데이터가 실제 DOM에 직접적으로 접근하여 업데이트 된다면 이는 분명 무리가 될 것이라고 판단이 된다. 

 

웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다.

 

즉 DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게되는 문제를 해결하기 위해 Virtual Dom(가상돔)이 등장 하였습니다.

✔Virtual Dom

리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본입니다 .

이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있습니다.

 

💡가상돔을 이용한 DOM 조작 과정

리액트는 항상 두개의 가상돔을 갖고 있습니다.

첫번째 가상돔은 변경 이전의 내용을 담고있고, 두번째 가상돔은 변경 이후에 보여질 내용을 담고있습니다.

 

우리가 이미 알고 있듯이 react는 state가 변경될때마다 화면이 새로 렌더링이 되는데 react는 렌더링이 발생될 상황이 놓일 때마다 새로운 화면에 들어갈 내용이 담긴 가상돔이 생성되고 ( 실제 브라우저에 그려지기 이전에)

 

변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는

 

그후에 렌더링 이전에  화면의 내용을 담고 있는 첫번째 가상돔과  업데이트 내용을 담고 있는 두개의 가상돔을 비교해서 정확히 어떤 부분(element)이 바뀌었는지 효율적으로 비교하여 파악합니다              

이러한 과정을 Diffing 이라고합니다 .         

 

Diffing을 통해서 변경된 부분들을 파악한 이후에 ,리액트는 Batch Update를 수행함으로 변경된  모든 element 들을실제 DOM에 한꺼번에 적용시켜준다. 

이러한 과정을 Reconsiliation(재조정) 이라고 한다.

 

DOM과 유사한 객체를 메모리 상으로 구현하고 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고. DOM에 대한 비교를 수행하여 변경 사항에 대해서만 DOM에 반영합니다. 이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.

 

 

---

https://jssq2468.tistory.com/170

[자바스크립트]DOM?BOM?