Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
“virtual DOM”은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다릅니다. React의 세계에서 “virtual DOM”이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 React elements와 연관됩니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다.
출처: https://ko.reactjs.org/docs/faq-internals.html
virtual Dom 을이해하려면 Dom이 뭔지 먼저 알아야할 것이다.
Dom은 '문서객체모델'이라고 하는데, 브라우저에서 다룰 HTML문서를 Parsing하여 '문서의 구성요소들을 구조화하여 나타낸 것' 이다.
그렇다면 virtual Dom은 무엇 때문에, 또한 그 무엇을 어떻게 해결하기 위해 만들어진 것일까.
어떤 문제를 해결하기 위한 기술인가?
DOM 조작에 의한 렌더링이 비효율적인 문제
SPA(Single Page Application)특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게되는 문제다.
virtual Dom 에 관해 찾아본 결과 아주 간단히 왜, 무엇이, 그래서 어떻게 해결햇는가에 대해선 다음 문장으로 정리하도록 하겠다.(개념이 어렵다. 이해만 하고 넘어가는 쪽으로 하자.)
- virtual Dom은 Dom과 유사한 역할을 하는 객체이다.
- 1번을 다시 말하자면, 변경 사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정.
- Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후, 구성요소의 변경이 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결
