Virtual DOM

Virtual DOM?

한 번에 여러 개의 DOM 객체를 수정해야 한다면?

출처: 이선협 강사님 데브코스 강의 자료

이선협 강사님이 작성하신 비교 예시이다.
계속해서 DOM을 수정하게 되면 레이아웃을 똑같이 계속해줘야 하므로 비효율적이다.
변수만 수정하다가 마지막에 DOM을 수정하는 것이 적절한 방법이다.

하지만 개발자가 일일이 DOM을 관리할 수는 없다. 서비스가 커질수록 더더욱 불가능하다. 이를 해결하기 위헤 고안된 것이 Virtual DOM이다.

Virtual DOM(가상 돔)은 실제 DOM 트리를 JavaScript 객체로 만든 것으로 필요한 정보만 추출하여 만든다. 바뀌는 부분만 뽑아서 수정하여 렌더링은 마지막에 처리하므로 렌더링 효율이 좋아진다.

현재 사용되고 있는 React와 Vue 프레임워크에서도 가상돔을 사용하고 있다.

Virtual DOM에 대한 오해

• Virtual DOM은 DOM보다 빠르다?

  React는 DOM보다 빠르다는 것은 미신이다. 유지보수가 용이한 애플리케이션을 만들도록 도와주고 대부분의 use case에서 충분히 빠른 것 뿐이다.
  - React 핵심 개발자
  

렌더링할 때 효율이 좋을 뿐 실제로는 똑같은 DOM을 두 번의 탐색과 두 배의 메모리를 필요로 하므로 느리다.
하지만 실제 웹페이지 개발에서는 성능 최적화보다는 개발 편의성을 더 중요할 때가 많으므로 가상돔을 주로 사용한다. 물론 성능 최적화가 가능하다면 동시에 하는 것이 좋다.

알아보기

만약 가상돔을 사용하지 않고 최적화를 해야 한다면?
=> document.createDocumentFragment를 알아보자.