DOM (Document Object Model)
브라우저는 페이지에 해당하는 HTML을 분석해서 화면에 띄워주는데, 웹페이지에 들어가있는 HTML element들을 트리 형태의 구조로 표현한 것이 DOM이다.
DOM트리 안에는 각각의 element에 상응하는 node가 들어있다. 개발자들은 DOM이 제공하는 API(Javascript에서는 getElementById(), querySelector()와 같은 것)를 통해 DOM 구조에 접근하고 원하는 element의 내용, 구조, 스타일 등을 입맛대로 변경할 수 있는데 이러한 행위를 DOM 조작이라 한다.
Virtual DOM (VDOM)?
Virtual DOM은 실제 DOM과 똑같은 내용을 담고 있는 복사본으로, 실제 DOM이 아니며 자바스크립트 객체 형태로 메모리 안에 저장돼있다.
Virtual DOM은 브라우저에 있는 문서에 직접 접근할 수 없다. 그러므로 화면에 보여지는 내용을 직접 수정할 수 없다.
🤔 여기까지 보면 Virtual DOM은 별로 쓸모가 없어 보이는데 이미 존재하는 실제 DOM의 복사본을 왜 만들어 놓은 것일까?
React는 Virtual DOM을 사용해 실제 DOM을 조작하는데 걸리는 시간을 획기적으로 줄여준다!
실제 DOM 조작
-
브라우저가 현재 페이지의 HTML을 탐색해서 해당 element를 찾고 해당 엘리먼트와 잔여 element들을 돔에서 제거한다.
-
새롭게 수정된 element로 교체한다.
-
CSS를 다시 계산하고 레이아웃 정보를 알맞게 수정하고 새롭게 계산된 내용에 따라서 브라우저에 다시 그려준다.
❗️ 그런데 매번 DOM을 조작할 때마다 브라우저 화면에 UI를 새롭게 그리는 작업은 꽤나 복잡하고 시간이 걸린다.
Virtual DOM을 통한 실제 DOM 조작
Virtual DOM은 실제 DOM 안에 있는 모든 element들과 그 속성들을 동일하게 가지고 있다.
그러나 Virtual DOM은 자바스크립트 객체에 지나지 않으며, 실제 DOM과는 다르게 직접적으로 화면의 UI를 조작할 수 있는 API를 제공하지 않는다.
그러므로 Virtual DOM을 생성하고 접근하는 것은 아주 가볍고 빠른 작업이다.
리액트는 항상 두개의 가상돔 객체를 가지고 있다.
- 첫 번째 Virtual DOM : 렌더링 이전 화면 구조를 나타냄
- 두 번째 Virtual DOM : 렌더링 이후 보이게 될 화면 구조를 나타냄
React는 state가 변경될 때마다 화면이 새로 렌더링 된다.
렌더링이 발생될 상황에 놓일 때마다 새로운 화면에 들어갈 내용이 담긴 Virtual DOM(두 번째 Virtual DOM)을 생성한다.
실제 브라우저에 그려지기 전에, 업데이트 이전 화면의 내용을 담고있는 첫 번째 Virtual DOM과 업데이트 이후의 내용을 담고 있는 두 번째 Virtual DOM을 비교해 어느 element가 변했는지 찾아낸다. ➡️ Diffing
이후 딱 바뀐 부분들만 실제 돔에 적용시킨다. ➡️ Reconciliation(재조정)
여기서 React의 재조정 과정이 매우 효율적인 이유는 Batch Update 덕분이다.
Batch는 '집단, 무리'라는 의미를 가진 단어로, 사전적 의미 그대로 변경된 모든 element들을 집단으로 실제 DOM에 한 번에 적용시킨다.
앞서 DOM 조작에 있어 가장 비용이 많이 드는 작업이 화면을 그려주는 작업이라고 설명했다. 그러므로 변경 사항을 하나하나 적용시키는 것보다 한꺼번에 반영하는 것이 훨씬 더 빠르고 효율적이다.
✏️ 정리
-
React의 Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이다. 그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
-
React는 항상 두 개의 Virtual DOM을 가지고 있다.
첫 번째 Virtual DOM은 변경 이전의 내용을 담고 있고, 두 번째 Virtual DOM은 변경 이후에 보여질 내용을 담고 있다. -
변경된 내용이 화면에 새롭게 그려지기 전, 즉 실제 DOM에 반영되기 이전에 React는 두 개의 Virtual DOM을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이 과정을 Diffing이라 부른다.
-
Diffing을 통해 변경된 부분을 파악한 후, React는 Batch Update를 수행해 실제 DOM에 한번에 적용시킨다. 이 과정을 Reconciliation(재조정)이라 한다.
※ 참고 자료
React의 가상돔 (Virtual DOM)이 뭔가요?
