Virtual Dom 에 대해서 공부하기 전에, DOM
이란 무엇인가를 먼저 알 필요가 있다.
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
자바스크립트는, 이러한 객체 모델을 사용하여 다음과 같은 작업을 수행할 수 있다.
위의 과정은 Document
라는 전역 객체를 통해 접근하여 추가 및 변경등이 가능하다.
그렇다면, Virtual Dom이란 무엇일까?
Virtual의 뜻 그대로, 가상의 DOM 이란 뜻이다!
이것은 상황에 따라 달라진다.
React 는 대규모 SPA 와 다이나믹 UI 의 웹 페이지를 만들기 위해서 존재한다.
만약 규모가 작고 정적인 이전의 웹 애플리케이션이라면 일반 DOM 이 성능이 더 좋다.
즉, 상황에 따라 어느쪽이 좋은지 다를 수 있다는 것이다.
그러나 DOM 은 앞서 말했듯 초기 정적인 웹페이지에 맞계 설계되었기 때문에,
현재 동적인 웹 애플리케이션에 사용하기에는 성능상 문제가 발생한다.
복잡한 SPA 에는 DOM 조작이 굉장히 빈번하게 발생하며, 그 변화를 적용하기 위해서는 브라우저가 많은 연산을 하게 된다.
즉, 결국 비효율적인 프로세스가 발생하게 된다.
그래서, Virtual DOM 을 사용하는 것.
Virtual DOM 을 사용하면 실제 DOM 에 접근하며 조작하는 대신,
이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
DOM 의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤
최소한의 내용만 반영하기 때문에 성능 향상을 이끌어내는 것이다. -> 성능향상!