Virtual DOM
문서 객체 모델(DOM)이란?
React에서 사용하는 Virtual DOM에 대해 알아보기 전에 우선 DOM에 대해서 간략히 살펴보도록 하겠습니다.
문서 객체 모델(Document Object Model, DOM)은 HTML이나 XML 문서의 구조화된 표현으로, 문서 내의 모든 요소를 정의할 뿐만 아니라 각각의 요소에 접근하는 방법(인터페이스)도 같이 제공합니다. DOM은 노드(node)와 객체(object)로 문서를 표현하며, 자바스크립트와 같은 스크립팅 언어를 사용하여 수정할 수 있습니다.
DOM에 대해 좀 더 자세히 알아보고 싶다면 자바스크립트 DOM 수업을 참고하시기 바랍니다.
Virtual DOM
기존 방식에서는 View에 표시할 데이터가 변경되었을 때 갱신이 필요한 DOM 요소들을 직접 찾아 조작함으로써 업데이트를 진행하였습니다. 하지만 React에서는 Virtual DOM이라는 새로운 개념을 도입함으로써 View에서 변경되어야 할 부분을 효율적으로 찾아 업데이트할 수 있습니다.
Virtual DOM은 실제 존재하는 DOM이 아닌 메모리 상에서만 존재하는 가상의 DOM입니다. React는 상태(state)가 업데이트되면, 우선 변경 사항이 모두 적용된 전체 UI를 새로운 Virtual DOM에 렌더링합니다. 그리고 이전 버전의 Virtual DOM과 새로 생성된 Virtual DOM을 서로 비교하여 차이점이 있는 부분만을 실제 Browser DOM에 적용하게 됩니다.
이를 통해 어떤 방식으로 View를 갱신해야 할지를 고민하지 않으면서도 성능을 크게 향상시킬 수 있습니다.
다만 Virtual DOM을 사용한다고 해서 언제나 성능이 향상되는 것은 아닙니다. 데이터가 지속적으로 변화하는 동적인 애플리케이션에서는 Virtual DOM을 사용했을 때 성능 향상이 큰 편이지만, 데이터가 자주 변경되지 않는 정적인 애플리케이션에서는 오히려 성능이 느려질 수도 있습니다.
