[React] Virtual DOM

rang·2022년 8월 3일

React

목록 보기

4/5

DOM(Document Object Model)

HTML, XML document를 위한 프로그래밍 API이다. document(문서)의 논리적 구조를 제공하고, document에 접근하고 조작하는 방식을 정의한다. DOM에서는 HTML의 각 요소들을 객체로 여긴다. 따라서 각 요소들을 추가, 수정, 삭제할 수 있다.

웹 페이지는 일종의 document(문서)이다. 이 문서는 웹 브라우저를 통해 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML source 자체로 나타나기도 한다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹페이지의 객체 지향 표현이며, Javascript와 같은 스크립트 언어를 이용해 DOM을 수정할 수 있다.

DOM은 데이터가 수정될 때마다 렌더링되어 화면을 변경한다.

DOM이 필요한 이유

HTML은 웹 페이지를 구성하는데 사용되고, Javascript는 웹 페이지에 동작을 추가하는데 사용된다. HTML파일이 브라우저에 로드되면 Javascript는 HTML 문서를 직접 이해할 수 없다. 따라서 해당 문서가 생성되며 DOM이 생성된다. DOM은 기본적으로 동일한 HTML 문서의 표현이지만 객체를 사용하는 다른 방식이다. Javascipt는 HTML의 태그는 해석하지 못하지만 DOM의 객체는 해석할 수 있다.

DOM 구조

아래와 같은 HTML이 있을 때 <div>라는 객체는 <h1>, <p>을 하위 값으로 가지고 있다. 이를 트리 구조라고 하는데 DOM은 HTML의 요소를 객체라고 여기므로 DOM도 트리 구조이다.

<div>
  <h1>Hello, world!</h1>
  <p>How are you?</p>
</div>

Virtual DOM(가상돔)

메모리 상에서 돌아가는 가상 DOM이다. 실제 DOM의 복사본 같은 존재이다. DOM은 트리 중 하나가 수정될 때마다 모든 DOM을 확인해 수정할 부분을 찾아 전부 수정하므로 필요없는 연산이 많이 발생한다. 그래서 가상DOM이라는 개념이 생겨났다. DOM은 변경사항을 전부 반영하고 화면에 그려내어 느리지만, 가상 DOM은 화면에 아무것도 그려지지 않으므로 빠르다. 그래서 프로그램의 상태가 변경될 때마다 실제 DOM 대신 가상 DOM이 먼저 업데이트 되고 실제 DOM이 수정된다.