서론
React는 Virtual DOM을 사용한다. 그렇다면 DOM이 무엇인지부터 알고 있어야한다. 그래서 이번 포스팅에서는 DOM과 Virtual DOM을 알아본다.
DOM
DOM : Document Object Model (문서 객체 모델)
웹 브라우저가 HTML 페이지를 인식하는 방식이다. HTML 문서는 다양한 태그들이 계층적인 구조로 사용되어진다. 이러한 태그들을 javascript가 읽을 수 있는 트리 형태의 객체로 표현한 것이 DOM이다. (DOM트리라고도 한다.)
Node
DOM의 모든 객체들은 (Element, Text 등) Node 객체를 상속받는다.
즉, Node는 DOM의 계층적 단위이다.
Node는 EventTarget을 상속하고 HTML의 모든 요소들은 Node를 상속하기 때문에 모두 이벤트 리스너를 등록,삭제,추가할 수 있는 것이다.
또한 element.append(child) 와 같은 메서드를 사용하여 DOM조작을 할 수 있는것도 element가 Node를 상속받기 때문에 가능한 것이다.
Node에 대한 자세한 내용은 MDN 페이지에서 더 자세히 확인할 수 있다.
브라우저 렌더링
브라우저 렌더링 과정을 공부해봤다면 DOM이 어떻게 사용되는지 알 수 있을 것이다.
렌더링 과정을 간단하게 요약하면 다음과 같다.
HTML파싱 👉 DOM , CSSOM 생성 👉 렌더트리 생성 👉 레이아웃 👉 페인팅
DOM에 변화가 생기면 위 과정을 거쳐 렌더링이 일어난다.
성능 이슈 💥
정적인 웹페이지라면 큰 문제가 없다. 하지만 React와 같이 상태 변화에 따라 UI가 동적으로 변화하는 환경이라면 상태가 변할때마다 모든 컴포넌트에서 위 렌더링 과정을 거쳐야 하기 때문에 굉장히 부담이 갈 것이다.
Virtual DOM
DOM의 동적 웹페이지에서의 성능 이슈를 해결하기 위해 리액트는 Virtual DOM을 사용한다.
Virtual DOM은 말그대로 가상의 DOM으로, DOM을 추상화한 것이다.
DOM의 내용을 갖고있는 가벼운 복사본이라고 이해하면 쉽다. 실제 DOM 객체가 아니라 DOM의 element 정보들을 갖고있는 복사 객체로서 메모리에 저장되어져있다.
상태가 변화하면 DOM을 직접 변경하는 것이 아니라 변경된 노드를 추적해서 변경 사항을 Virtual DOM에 등록한다. 이전 Virtual DOM과 비교하여 변경된 부분만 DOM에 업데이트한다.
Virtual DOM의 동작 원리
- DOM 생성 : 실제 DOM의 구조를 복사한 것이다. (그 안의 api까지 사용할 수 있는 것은 아님)
- 업데이트 : 가상 DOM을 순회하며 기존의 가상 DOM과 비교하여 업데이트할 부분을 찾아낸다. 업데이트된 새로운 가상 DOM 생성.
(변경된 부분만 찾아서 최소한으로 업데이트) - 실제 DOM에 업데이트 : 업데이트된 가상 DOM을 실제 DOM에 반영하여 UI가 업데이트된다.
이처럼 Virtual DOM을 사용해서 모든 함수를 렌더링하지 않고 필요한 부분만 렌더링할 수 있게 된다.
마무리
이번 포스트에서는 DOM에 대해 알아보았다. 코딩을 하면서 다양한 요소들을 사용할 줄만 알았는데 DOM에 대해 공부하며 요소들의 구조와 상속에 대해 알 수 있어서 유익했다.
