[React.js] DOM과 Virtual DOM

웹 브라우저의 렌더링

DOM을 알기 전 웹 브라우저가 어떻게 우리에게 보여지는지 이해해보자.

1. HTML과 CSS를 전달받아 파싱하여 각각 DOM과 CSSOM라는 트리 객체를 생성
2. DOM과 CSSOM을 이용하여 실제로 보여지는 요소들로 구성된 렌더 트리를 생성
3. 레이아웃 과정을 통해 각 요소들을 어디에 어떤 크기로 배치할지 결정
4. 페인팅 과정을 통해 각 요소들을 실제 화면에 그림

---

DOM (Document Object Model)

DOM이란 Document Object Model의 약자로 문서 객체라는 뜻이다.

이는 DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식이며 트리 구조를 가진다. 

이렇게 HTML에 따라 생성된 DOM은 위에서 설명한 웹 브라우저의 렌더링 과정에 의해 실제 화면에 표현된다. 만약 HTML 파일을 수정하여 DOM을 조작하게 되면 레이아웃 과정과 페인팅 과정이 다시 진행된다. 이렇게 DOM 조작으로 레이아웃 과정이 다시 진행되는 것을 리플로우(reflow), 페인팅 과정이 다시 진행되는 것을 리페인팅(repainting)이라고 하며 리플로우와 리페인팅이 많이 수행될수록 웹 서비스의 성능이 저하된다. 이러한 문제를 해결하기 위해 리액트에서는 가상돔 방식을 사용한다.

 

가상 돔(Virtual DOM)

가상 돔 방식은 화면에 표시되는 돔과 동일한 가상 돔을 메모리 상에 만들고 돔 조작이 발생하면 가상 돔에 모든 연산을 수행한 후, 실제 돔과 비교하여 달라진 부분만 바꾸는 방식으로 리플로우와 리페인팅 연산을 최소화할 수 있다.

---