DOM, VirtualDOM

DOM은 Document Object Model로 HTML, XML 등 문서를 위한 API다.

프론트 개발자들은 DOM을 활용해 문서를 작성하고 구조를 분석하며 DOM에 요소를 추가, 삭제 및 수정을 할 수 있다.

모든 웹 브라우저는 HTML문서를 DOM으로 구문 분석을 하는 DOM parser가 있다.

DOM parser는 HTML을 읽고 데이터를 DOM으로 구성하는 개체로 바꾸고 DOM Tree로 배열한다.

DOM Tree에서는 HTML의 각 요소를 Node라고 부르는데, DOM에 변경이 발생하면 DOM Tree의 노드에 변경사항이 반영된다.

예를 들어 <div> 태그의 스타일을 업데이트 한다면 다른 DOM Node들에 영향을 주지 않기 위해 해당 업데이트가 필요한 DOM Node에만 접근하여 스타일을 업데이트 해준다.

하지만 불행하게도 DOM Tree에 변화가 생기면 각 노드들은 재정렬이 되어야 하는 결과를 불러올수 있는데 해당 작업은 비용을 많이 소요하는 작업이기 때문에 랜더링 하는데 리소스와 시간이 소요된다.

즉, DOM에 변화가 생길 때마다 DOM Tree는 매번 재생성 되는것이다.

다른 한 가지 같은 예로 DOM Tree에 하나의 Node를 추가 혹은 삭제하여 페이지 전체 레이아웃이 영향을 받는 경우 웹 페이지의 일부 혹은 전체가 리렌더링 하게 된다.

이런 경우를 Reflow 라고 하는데, 이는 유저의 인터렉션으로 발생하는 hover, 텍스트 입력, 글꼴 크기 변경, 등으로 인하여 발생하게 된다.

위에서 언급 한것 처럼 Reflow는 비용이 많이 드는 작업으로 성능및 속도 저하로 이어질수 있다.

과도한 Reflow를 피하기 위해서는 되도록 DOM에 접근하여 작업하는것을 피해야 한다. 이런 부분은 Virtual DOM을 통해 개선하게 된다.

VirtualDOM은 DOM에서 수행하는 모든 변경사항을 VirtualDOM에서 수행한 뒤 실제 DOM에 적용하여 계산 단계를 줄일 수 있게 해준다.

DOM에 여러 변경사항이 발생할 경우 Virtual DOM에서 모든 변경 사항을 하나로 그룹화하여 한 번의 계산만 수행하게 됨으로 직접 DOM을 조작하지 않아도 변경사항을 반영 할 수 있게 된다.

즉, Virtual DOM은 아래 문제점들을 해결해준다.

위의 그림은 리액트에서 뷰가 어떻게 업데이트 진행되는지 보여주고 있으며. 실제 코드에서 우리는 React에서 render() 함수를 통해 Virtual DOM을 구현한다. 그리고 render() 함수를 통해 엘리먼트들을 반환하고

state나 props에 변화가 생길 경우 역시 render()를 통해 새로운 엘리먼트 반환하게 되는데. 이 경우 react는 diff 알고리즘을 이용하여 효율적으로 뷰를 업데이트 진행한다.