React Virtual DOM이란?

Virtual DOM

Virtual DOM이란 말그대로 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로, UI의 가상적 표현을 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 이러한 과정을 재조정(Reconciliation)이라고 한다.

 

사용자 인터페이스를 나타내는 자바스크립트 객체의 형태이고, 브라우저에서 DOM을 보여주는 일반적인 방식보다 속도가 훨씬 빠르게 구현해준다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링한다. 그 다음 실제 브라우저에 보여지고 있는 DOM과 비교하여 차이 있는 곳을 감지해 실제 DOM에 패치해준다.

 

발생하게 된 계기와 함께 다시 간단히 설명하면, 브라우저에서 DOM을 직접 건드리는 작업이 번거롭다 보니 DOM을 전부 날리고 다시 만들어 보여주는 발상을 하게 되었음. 하지만 매번 전부 날리고 다시 만들면 다양한 문제가 발생하기 때문에 메모리에 가상 DOM을 만들어서 업데이트 필요한 부분만 가상 DOM을 통해 수정하고, React의 알고리즘을 통해 차이나는 부분을 감지해 실제 DOM에 패치해주는 방식으로 속도와 효율을 개선한 것이다.

 

ⓒ벨로퍼트와 함께하는 모던 리액트

 

참고

https://react.vlpt.us/basic/01-concept.html

1. 리액트는 어쩌다가 만들어졌을까? · GitBook

https://ko.legacy.reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

Virtual DOM과 Internals – React