DOM이란?
문서 객체 모델 (Document Object Model)은 XML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
이미지 출처: http://tcpschool.com/ajax/ajax_basic_dom
자바스크립트는 이러한 문서 객체모델을 이용하여 document 에 접근해 작업할 수 있다.
즉, DOM 은 HTML 과 자바스크립트를 서로 이어주는 역할을 한다.
Document 라는 전역 객체는 HTML을 자유롭게 사용하며, HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.
가상 DOM 이란?
DOM은 스크립트 언어를 사용하여 document 객체를 통해 문서 (HTML, XML등)에 접근할 수 있도록 도와주는 역할을 한다고 위에서 말했는데, 가상 DOM 은 실제 DOM 의 가벼은 사본이다.
왜 가상 DOM 을 사용할까?
가상 DOM이 왜 필요한지 알아보려면 브라우저가 DOM을 이용해 화면을 렌더링 하는 방법 먼저 알아두면 이해하기 쉽다.
렌더링 엔진 구간 파일처리방식
이미지 출처: https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq
브라우저가 사용자에게 보여주는 UI 처리과정
- Parser : 각 파일들을 브라우저가 알아들을 수 있게 변환
- DOM Tree : 파일의 경우, 각 태그의 관계도 형성을 위해 DOM 트리 생성
- Attachment : HTML의 각 태그에 맞는 스타일 (CSS) 정보를 객체 형태로 다음 단계로 넘겨줌
- Render Tree : 외부 CSS 파일이 선언되어있다면 이를 필요로 하는 각 HTML 엘리먼트에 결합 후, 이전 Atttachment 에서 전달받은 스타일 값들을 계산하여 레이아웃 정보 형성
- Layout : 렌더 트리 작업이 끝난 레이아웃에 대해서 좌표 부여
- Painting : 렌더링이 끝난 각 레이아웃들에게 실제 사용자에게 보여질 모양과 색 부여
이러한 처리과정은 브라우저에 어떠한 작은 변호가 있을 때 마다 위 작업들을 반복하며 다시 레이아웃을 형성하게 된다.
특히 리액트같이 SPA (Single Page Application)의 경우, 단일 페이지에서 사용자와 인터렉션이 빈번히 일어나게 되고, 사용자 입장에서는 한번의 클릭이지만, 브라우저는 그 한번의 클릭 이벤트로 일어나가되는 수많은 레이아웃들의 위치, 모양, 색상, 데이터 호출 등이 일어나기 때문에 브라우저가 연산하게 되는 양은 어마어마해지며, 자연스럽게 사용자에게 불편함을 가져다 준다.
그래서 생겨난 방식이 가산 DOM 이다.
가상 DOM 자세히 알아보기 (Virtual DOM)
이미지 출처: https://noogoonaa.tistory.com/53
말 그대로 가상으로 존재하는, 특정 기술로써 존재한다기 보다는 추상적인 프로그래밍 개념이다.
리액트 가상 홈페이지에서는 가상 돔의 역할을 '재조정'이라고 부르는데, 변화하는 돔의 요소를 메모리에 저장 후 실제 적용시킬 돔과 동기화 하는 작업이라는 뜻으로 사용하는 것 같다.
위에서 말한 사용자의 한번의 클릭으로 일어나는, 사용자 인터렉션으로 일어나게 될 변화의 양을 가상돔이 한거번에 묶어서 최종적으로 계산 된 레이아웃의 정보만 실제 DOM 에 전달하 것, 이것이 가상 돔의 역할이다.
묶어서 한번에 전달하면 브라우저의 연산 양이 기존보다 적어지게 되므로 자연스럽게 사용자에게 쾌적한 UI 환경을 제공할 수 있게 된다는 장점이 있다.
References:
https://humanwater.tistory.com/11
https://moonsbeen.tistory.com/255
