1. 정의

• DOM의 구조만 간결히 흉내낸 자바스크립트 객체이다.

2. 등장 배경

• DOM의 경우에는 값이 수정되면 브라우저의 렌더링 과정이 모두 다시 실행됐는데 이는 상당히 비효율적이다.
• 더군다나 SPA 트렌드에 접어들면서 프론트엔드의 값을 인터랙션(ex 클릭)에 의해 DOM을 즉각적으로 수정해야 하는 경우가 많아졌다.
• 이 부분을 해결하고자 나온 것이 Virtual DOM이다.

3. 원리

• Virtual DOM에 변경사항이 반영되면 원본 DOM과 비교하여 바뀐 부분만 반영된다.
• 즉 전체 Real DOM을 바꾸지 않고도 필요한 UI 업데이트 적용 가능하다.
• DOM은 브라우저 렌더링 과정이 모두 다시 실행되지만 Virtual DOM은 Layout과 Paint부분만 다시 실행된다.
• 그리고 요소가 30개가 변경되었다고 하더라도 Layout 과정을 30번 하는 것이 아닌 모든 변화를 하나로 묶어 딱 1번만 실행시킨다. 즉 브라우저의 연산을 줄여서 컴퓨터의 부담을 덜어준다.

4. 리액트로 드는 예

1) 전체 Virtual DOM이 업데이트

• 최초 Virtual DOM이 업데이트된다.

2) 업데이트 이전 시점과 비교

• 요소에 변화가 생기면 내부적으로 자바스크립트 객체로 생산된 Virtual DOM이 업데이트 이전 시점과 어떤 부분이 달라졌는지 비교한다.

3) 실제로 바뀐 부분만 Real DOM적용

• 비교를 통해 달라진 부분만 Real DOM에 렌더링된다.

5. 결론

• Virtual DOM은 SPA 트렌드에 맞춰 인터랙션이 있을 때 효율적으로 브라우저를 렌더링하기 위한 방법이다.
• 인터랙션이 없는 정보 제공만을 하는 사이트라면 오히려 DOM의 성능이 더 좋을 수 있다.
• 그러나 요새 대부분은 SPA로 인터랙션 위주의 사이트가 제작되었긴 하다.