[React] Virtual DOM

Virtual DOM에 대해 알아보기 전에, DOM이 무엇인지 알아보자.

 

DOM이란,

 

Document Object Model

 

로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.

웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용한다.

 

이 DOM 자체는 빠르나, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하기 때문에 이 과정에서 시간이 허비가 된다.

 

이를 어떻게 해결할까?

DOM을 최소한으로 조작해 작업을 처리하는 방법으로 개선할 수 있다.

따라서 리액트는 Virtual DOM 방식을 사용해 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화, 효율적으로 진행한다.

 

 

그러나, Virtual DOM을 사용한다고 해서, 이를 사용하지 않을 때와 비교해 무조건 빠른 것은 아니다.

리액트는 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축" 의 문제를 해결하기 위해 만들어졌기 때문에

이것이 제공하는 것은 "업데이트 처리 간결성" ㅇ이다.

 

따라서 UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있다.