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” 구현의 일부로 간주할 수 있습니다.
(영문)
To understand the virtual DOM and learn why React implements it, let us refresh our knowledge of the actual browser DOM.
Whenever a web document — such as HTML — is loaded in the browser, an object-based representation of the document’s elements is created in a tree-like structure. This object representation is called the Document Object Model, also known as the DOM.
Due to its object-based nature, JavaScript and other scripting languages understand the DOM and can interact and manipulate the document content. For instance, with the DOM, developers can add or remove elements, modify their appearance and perform user’s actions on the web elements.
DOM operations like DOM querying and updating are lighter and thus are very fast. However, for the update to reflect on the web page, the page will have to re-render.
