[React] Virtual DOM

1. DOM

DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 

여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 

 

즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 

 

2. Virtual DOM이 나온 이유 

만약 <a> 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 

 

1. 메모리 누수와 속도 

<a> 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 

각 단계마다 페이지의 모든 document를 훑으며 찾는 현상이 발생하고, 메모리 누수로 이어진다. 

 

또한 <a>에 변화가 발생하면 css와 다시 합쳐서 레이아웃을 구성해서 웹페이지를 나타내 시간이 든다. 

 

단순 <a> 요소 한번만 변경한다면 문제가 크지 않겠지만, 이러한 작업은 어떤 요소를 수정하더라도 발생한다.

 

2. 코드량 

객체를 찾기 위해 작성하는 코드가 번잡스러워질 수 있다. 

일반적으로 요소의 id는 고유성을 침해당하지 않기 위해 네이밍을 정할 때 심사숙고할 것이고, 접근하는 메서드가 

그렇게 짧지 않다. 

 

3. Virtual DOM ? 

실제 DOM에 접근하여 조작하는 대신, 추상화시킨 자바스크립트 객체(가벼운 복사본 개념)를 이용해서 사용한다. 

 

Virtual DOM 반영 절차 

1. 변화가 일어나면 현재 UI를 Virtual DOM으로 바꾼다. 

 

2. 변화된 UI를 Virtual DOM으로 변경하여 서로 비교한다. 

 

3. 실제 변경이 일어난 부분만 적용한다. 

 

작업 규모의 레이아웃 변경이 자주 발생하는 것보다 큰 규모의 레이아웃 변경이 한 번에 발생하는 것이 성능에 더 좋은 결과를 나타낸다.