Virtual DOM

Virtual DOM

• Virtual DOM = Virtual(가상) + DOM(Document Object Model, 문서 객체 모델)이다.
• Virtual DOM은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이고, 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

 

DOM

• DOM(Document Object Mode)을 영어 뜻풀이 그대로 하면 문서 객체 모델이다.
• 여기서 문서 객체란 html, head, body와 같은 태그들을 javaScript가 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다.

 

 

가상돔이 나오게 된 이유

• 어떠한 태그의 속성이나 값을 변경하려고 할 때 DOM에 접근하는 자바스크립트 메서드를 사용하여 변경한다.
• 가령 h1 태그의 색상을 변경한다고 가정했을 때 우리는 document.getElementById("h1의 id")로 먼저 접근한다.

 

이렇게 되면 두가지 측면에서 아쉬운 점이 있다.

ⓐ 메모리 누수와 속도

┌ document.getElementById를 사용하면 DOM을 탐색하는 과정에서도 메모리 누수가 일어나고,

├ 만약 값을 변경했다면 다시 렌더링 되는 과정을 반복한다.

└ 이 과정이 한페이지에서 여러번 반복하면 성능 측면에서 매우 비효율적이라는 말이다.

 

ⓑ 코드량

┌ 코드량이 방대해진다.

├ document.getElementByID를 보더라도 굉장히 길다.

├ 또한 id의 이름은 항상 고유하게 유지해야 하므로 네이밍 하기에 벅차다.

└ 이런 고민속에서 탄생한 것이 Virtual DOM(가상 돔)이다.

 

 

리액트가 가상돔을 반영하는 절차

• 특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는 다음과 같다.

        ⓐ 변화가 일어났다. 변화된 버전을 가상돔으로 바꾸자.

                └ 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.

        ⓑ 가상돔끼리 비교하자.

                └ 변화 전의 가상돔과 변화된 가상돔을 비교한다.

        ⓒ 변화 전의 가상돔과 변화된 가상돔을 비교한다. 바뀐 부분만 적용하자.

                └ 바뀐 부분만 실제 돔에 적용을 함으로써 레이아웃 계산은 한번만 이행된다.