티스토리 뷰
DOM
우선 가상 DOM을 이해하기 전에 DOM의 의미를 짚고 넘어갈 필요가 있다.
Document Object Model의 준말이며 HTML과 XML의 문서이자 그것들을 위한 프로그래밍 인터페이스다.
여기서 프로그래밍 인터페이스를 간략히 설명하자면 HTML이나 XML에 어떠한 속성과 엘리먼트들이 존재해야 하는지 기술만 해놓고 실제 구현은 각 구현하는 곳에서 다르게 구현할 수 있도록 약속을 정의해놓은 것이라고 보면 된다.
다시 DOM으로 돌아와서 DOM은 프로그래밍 인터페이스이기 때문에 다양한 브라우저에서 해당 인터페이스를 구현한다.
즉, 브라우저가 DOM을 읽고 그 DOM에 해당하는 것들을 만들 수 있으며 한편 DOM은 자바스크립트로 제어할 수 있기 때문에 DOM에서 정의한 문서의 구조를 수정할 수 있다.
그렇다고 해서 자바스크립트만 DOM을 제어할 수 있는 건 아니다.
다른 언어에서도 충분히 DOM을 제어할 수 있기 때문에 DOM은 특정 언어에 종속된다고 할 수 없다.
또한 DOM은 객체의 형태로 표현된다는 것을 꼭 알고 있자!
virtual DOM
리액트의 공식 홈페이지를 참고하면 virtual DOM 은 가상의 DOM을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이라고 한다.
그리고 이 과정을 재조정(Reconciliation)이라고 한다.
리액트에게 원하는 DOM의 상태를 알려주면 실제 DOM을 그 상태와 일치하게 해주는 아주 고마운(?) 라이브러리라고 할 수 있다.
흔히 라이브러리 없이 자바스크립트로 앱을 구축할 때 노드의 attribute를 직접 조작하거나 이벤트 리스너, 이벤트 버블링과 캡쳐링으로 UI의 상태를 직접 업데이트하게 되면 DOM이 달라짐으로 다시 전체 DOM을 재배치해야 함으로써 컴퓨터에 부담을 가하게 된다.
또한 DOM의 상태를 직접 바꾸는 코드는 상당히 길기 때문에 코드가 지저분해지기 쉽다.
하지만 리액트의 구동 방식은 앱 구축에 사용해야 하는 작업( attribute 조작, 이벤트 처리, 수동 DOM 업데이트)들을 추상화한다.
이 추상화는 실제 DOM의 구조가 바뀐다고 할 때 우선 메모리 위에서 같은 구조의 가상 DOM의 구조를 바꿔보고 가상 DOM과 실제 DOM을 비교하여 실제 DOM에서 바뀔 부분만 재배치 해주기 때문에 컴퓨터에 부담을 덜 가해주고 렌더링 속도도 그만큼 개선된다.
한편 가상 DOM은 특정 기술보다는 패턴에 가까우며 최근에 나온 svelte는 이러한 가상 DOM을 쓰지 않기 때문에 리액트보다 더 빠르다고 한다.