[React] DOM과 Virtual DOM

✅ DOM 이란?

HTML 문서를 JavaScript 가 다룰 수 있게 트리구조로 만든 객체 모델입니다.

요소와 속성, 이벤트, DOM 조작 메서드 등의 정보를 가지고 있습니다.

 

⚙️ 요소(element) : 웹 페이지의 HTML 요소 ex) div, p 등
⚙️ 속성(Attribute) : 요소의 속성 ex) id, class, style 등
⚙️ 이벤트(event) : 클릭 이벤트, 키보드 입력, 마우스 이동 등의 상호작용
⚙️ DOM 조작 메서드 : querySelector, createElement 등

 

 

🤔HTML을 어떻게 JavsScript 가 조작할 수 있을까요?

브라우저로 HTML 문서를 열면 렌더링 엔진이 HTML 문서를 한줄한줄 읽고 해석합니다.
해석이 끝나면 객체화 합니다. 이렇게 만들어진 것이 DOM입니다.
DOM으로 JavaScript가 조작할 수 있습니다. ex) querySelector

 

DOM의 작동 매커니즘

요소에 변화가 생기면 DOM 트리를 다시 그리고, 렌더링합니다.

변화가 생길때마다 매번 렌더링을 합니다.

트리구조를 업데이트 하는 것은 빠른 알고리즘을 사용하기 때문에 문제가 되지 않지만

브라우저 렌더링 과정중 Layout, Paint 작업은 복잡하고 시간이 오래 걸리기 때문에

렌더링시 성능 저하가 발생하게 됩니다.

✅ Virtual DOM이란?

Virtual DOM은 DOM을 가볍게 복사한 버전입니다.

요소와 속성 정보는 있으나, 이벤트, DOM 조작 메서드 정보는 없습니다.

 

Virtual DOM의 작동 매커니즘 ( Reconciliation / 재조정)

항상 두개의 트리를 가집니다

1. 원본 트리

2. 업데이트된 정보를 가진 트리

이 두 트리를 비교해서 달라진 부분만 실제 DOM에 적용합니다. ( 두 트리를 비교할 때 Diffing 알고리즘을 사용합니다.)

달라진 부분들은 한번에 모아 업데이트 하므로 렌더링은 한번만 하게 됩니다.

따라서 매번 렌더링하여 성능 저하가 발생하는 DOM의 단점을 극복했습니다.

 

⭐ 정리

1. DOM 은 브라우저가 HTML문서를 객체화한 트리구조입니다.

    1-1 객체화한 이유:  JavaScript가 HTML 문서를 조작하기 위해

2. Virtual DOM 은 DOM을 가볍게 복사한 버전입니다.

3. DOM은 업데이트 할 때마다 매번 렌더링을 하여 성능저하가 발생합니다.

4. Virtual DOM 은 재조정을 통해 한번만 렌더링을 하여 DOM의 단점을 극복했습니다.