Virtual DOM이란?
리액트 공식문서 설명
Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
“virtual DOM”은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다릅니다. React의 세계에서 “virtual DOM”이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 React elements와 연관됩니다.
그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다.
필자가 해석해서 하는 설명
html이라는 주문서를 가지고 브라우저라는 공장들이
그 주문서를 가지고 실체로 만들어낸 것이 DOM이라고 해보자.
이것을 각 html 요소들(div, table 등)을 가구처럼 물리적인 것으로 찍어내서
주문서에 맞게 배치하는 것이라고 상상하자.
div는 상자, 테이블은 선반 형태 등의 이러한 요소들을 모두 제작하고, html 주문서에 맞게 각 위치에 배치해 놨다.
그런데 갑자기 자바스크립트의 지시로 중간에 가구 몇개를 빼고 위치를 바꿔야한다고 생각해보자.
DOM의 html 요소들에 조작이 가해지는 것이다.
이러한 과정을 실제 DOM을 조작하면서 하려면 컴퓨터에 부담이 되고, 속도도 느려질 것이다.
가상돔은 이러한 과정을 효율적으로 구현하기 위해 가구들을 미니어쳐로 만든 다음에 시뮬레이션을 돌려 실제 움직이는 가구가 무엇인지 먼저 파악한 후, 딱 그 실제 가구들만 움직이는 것이다.
즉, 가상돔은 브라우저 단에서 이 과정들을 효율적으로 해내기 위해 만들어진 것이라고 보면 되는데,
사용자가 작서한 리액트 전용 코드를 브라우저가 가상돔으로 해석해서 메모리에서 먼저 구현한 다음 실제 돔에 적용을 하는 것이다.
