[React] DOM과 Virtual DOM

1. 문서 객체 모델(DOM)

https://tadaktadak-it.tistory.com/140

[JavaScript] 문서 객체 모델(DOM)

- DOM : Document Object Model

- DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환

- 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법

- 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델

 

- DOM 트리 구조 : 웹 문서의 요소를 부모와 자식 요소로 구성된 트리 구조

2. 일반적인 DOM 렌더링

https://web.dev/howbrowserswork/

- 일반적으로 DOM을 이용해 화면을 표시하는 렌더링은

HTML 파싱 -> DOM 트리 생성 => CSS 스타일 적용 -> Render 트리 생성 -> 레이아웃 구성 -> 페이팅 -> 화면에 표시 순서이다.

 

- 브라우저가 HTML을 전달 받으면, 곧 이를 변환(파싱)하고 노드들로 이루어진 DOM 트리를 만든다.

- 그 후, 외부의 CSS 파일과 각 노드들의 inline 스타일을 파싱하여 스타일을 입힌 Render 트리를 만든다.

- Render 트리가 만들이지면, 각 노드들이 화면에서 정확히 어디에 나타나야 하는지에 대한 위치가 주어진다.

- 그 후, paint() 메서드를 호출하면 내가 구현하고 싶었던 화면이 출력된다.

- DOM은 해당 과정을 계속 반복한다.

- 즉, 오타 수정, 문구 제거 혹은 이미지를 첨부하는 사소한 일을 하더라도, DOM은 처음부터 다시 HTML을 파싱하여 DOM 트리를 만들고 CSS를 파싱하여 Render 트리를 만들고, 레이아웃을 입혀 출력한다.

 

- 일반적인 DOM 렌더링은 수정, 추가, 삽입, 삭제를 할 때마다 이 작업을 실행하기 때문에 양이 많아지면 과부하가 생긴다.

- 이것을 해결하기 위해 Virtual DOM이 사용된다.

3. Virtual DOM

- React에서 Virtual DOM을 사용하는 가장 큰 이유는 성능적으로 빠르다는 것

- 즉, 다시 말해 성능을 빠르게 하기 위하여 Virtual DOM을 사용했다.

- 정확히는 DOM 조작 자체가 성능이 느리거나 문제가 있는 것이 아니라 DOM 조작 이후 화면에 그려지기 전까지의 과정이 느리다는 것이다.
- 이를 해결하는 방법으로 React에서는 Virtual DOM 기술을 사용함

https://elmprogramming.com/virtual-dom.html

- 일반적으로 DOM을 이용해 화면을 표시하는 렌더링은

HTML 파싱 -> DOM 트리 생성 => CSS 스타일 적용 -> Render 트리 생성 -> 레이아웃 구성 -> 페이팅 -> 화면에 표시 순서이다.

- 위의 일련의 과정에서 Virtual DOM에서 미리 해당 과정을 진행

DOM 트리 생성 -> CSS 스타일 적용 -> Render 트리 생성 -> 레이아웃 구성 과정을 Virtual DOM에서 미리 진행

 

- Virtual DOM에서 위 과정만 실행하다가 업데이트를 하면 바로 화면에 표시 되도록 함

- Virtual DOM에서는 많은 과정들을 하지만 어느 순간에 실제 렌더링은 한번만 일어난다.

- 그래서 더 빠르고 과부하도 적다.