[ReactJS] Virtual DOM

ReactJS

리액트는 자바스크립트 라이브러리로 UI를 만드는 데 사용한다. 구조가 MVC(Model-VIew-Controller), MVVM(Model-View-ViewModel)등인 프레임워크와 달리 오직 V(View)만을 신경 쓰는 라이브러리이다.

Virtual DOM 이란?

리액트의 주요 특징 중 하나는 가상 문서 객체 모델(Virtual DOM)을 사용하는 것이다.

우선 문서 객체 모델(DOM) 이란 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML을 이용하여 작성한다.

 

웹 브라우저는 DOM을 이용하여 객체에 자바스크립트와 CSS를 적용하고 DOM은 트리 형태로 특정 노드를 찾거나 수정하거나 제거하고, 원하는 곳에 삽입이 가능하다.

 

Virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 실제 DOM의 복사본과 비슷하다.

 

리액트에서 데이터가 변하여 실제 DOM을 업데이트하는 경우에는 다음과 같이 3가지의 절차를 거친다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교

3. 변경된 부분만 실제 DOM에 적용

 

Virtual DOM을 사용한다고 해서 무조건 사용하지 않을 때보다 빠른 것은 아니다. 리액트 메뉴얼에서는 다음과 같이 작성되어있다.

다음 문제를 해결하기 위해 리액트를 제작하였다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

 

즉 무조건 Virtual DOM을 사용해야하는 것이 아니라 적절한 곳에 사용을 해야 효율적인 Virtual DOM활용이 될 수 있다.