DOM과 가상 DOM

개요

• 브라우저의 동작
• Virtual DOM
• React에서의 동작

---

 

 브라우저의 동작

브라우저의 동작은 VirtualDOM의 등장과 등장 이전의 RealDOM만의 한계점을 설명해주는 부분으로써 동작형태와 이점을 좀 더 이해하기 쉽게 해주기에 기억하면 좋음

 

브라우저의 랜더링 과정) 

1. DOM tree 생성
   • 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM노드로 이루어진 트리를 생성한다.
2. render tree 생성 
   • CSS 파일과 inline 스타일을 파싱하여 CSSOM을 생성
   • CSSOM과 렌더 엔진에 의해 만들어진 DOM을 합쳐 render tree를 생성
   • 문서의 시각적인 구조를 나타낸다
3. Layout
   • viewport에서 생성된 render tree의 각 노드가 스크린상에 어느 공간에 위치할지 결정
   • position, size등의 결정
4. Paint(repaint)
   • 실제 화면을 사용자가 볼 수 있게 그려낸다

유저의 인터렉션으로 인해 브라우저의 랜더링과정이 일어나 render tree가 매번 새롭게 생성이 된다.
RealDOM만으로는 SPA의 사용과 비효율적인 렌더링에 대해서 보완을 할 수 없기에 새롭게 VirtualDOM이 등장하게 되었다

---

DOM vs Virtual DOM

DOM)

Document Object Model의 약자로 HTML 코드로 설계된 웹페이지가 브라우저 안에 화면에 나타나고, 이벤트에 반응하며 값을 입력 받는 등의 기능을 수행할 객체들로 실체화된 형태

 

Virtual DOM)

실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM
변화가 실제로 DOM에 적용되기 전 Virtual DOM과의 비교 후 실제 DOM에 업데이트 한다.

Virtual DOM의 실제 형태

Virtual DOM의 특징)

• Javascript 객체를 활용
• 메모리상에서만 동작하므로 DOM보다 빠르게 동작
• 실제 랜더링하지 않으므로 연산비용이 적음 (적은것이지 없는 것이 아님)
• DOM과 비교했을 때 속성은 같지만 API는 없음

Virtual DOM의 동작원리)

1. 데이터가 변경되면서 전체 UI는 VirtualDOM에 랜더링이 된다
2. 기존의 VirtualDOM에 있던 내용과 업데이트 후 VirtualDOM의 내용을 비교하여 바뀐부분을 찾아 RealDOM에 적용시킨다
3. 변화로 인해 여러개의 요소가 바뀌었다면 바뀐 변화만큼 연산을 실행하는 것이 아니라 하나로 묶어서 한번만 실행시킨다(DOM fragment t의 변화를 묶어서 적용한 다음 기존 DOM에 던져주는 과정)

---

React에서의 동작

리액트는 VirtualDom을 "UI의 가상적인 표현을 메모리에 저장하고 리액트돔과 같은 라이브러리에 의해 실제 돔과 동기화하는 프로그래밍 개념"이라고 설명하고 이 과정을 재조정이라고 부른다

 

JSX는 Javascript의 확장 문법으로써 React에서 사용되는 경우가 많다

 

React에서 JSX를 컴포넌트로 리턴시키면 Babel은 JSX를 React.createElement() 호출로 컴파일하고 이후 React.element객체로 변환되어 리턴된다. 이 객체는 VritualDOM의 객체구성과 매우 비슷하다

React.element의 특징

• 가볍다
• 상태를 가지지 않는다
• 불변성을 유지한다 (불변성으로 인해 비교하고 업데이트 하기 쉬워진다)

React.elemet객체

React.elemet는 React DOM의 랜더에 의해 DOM요소가 된다. 이 DOM요소를 이용해서 리액트는 항상 최신의 상태를 유지한다. 하지만 변경이 불가하기에 한번 만든 요소는 데이터가 변했다고 해서 자식이나 속성을 맘대로 변경할 수 없다. (각 elemet는 해당 순간의 ui를 스냅샷형태로 보여줄 뿐이기 때문이다)

업데이트 할 수있는 방법은 새로운 요소를 만들어 리액트 돔의 렌더에 전달하는 방법밖에 없다

데이터가 업데이트 되어지면, 바뀐 데이터를 바탕으로 React.createElement()를 통해 JSX element를 렌더링한다. 이때 각각의 모든 Virtual DOM Object가 업데이트 되어진다. Virtual DOM은 빠르게 업데이트 되어지기 때문에 비용이 많이 들지 않는다. 이 Virtual DOM이 업데이트 되어지게 되면, React는 Virtual DOM을 업데이트 이전에 Virtual DOM 스냅샷과 비교하여 정확히 어떤 Virtual DOM이 바뀌었는지 검사를 한다.

 

 

 

Diff 알고리즘

Virtual DOM이 업데이트되면, React는 Virtual DOM을 업데이트 이전의 스냅샷과 현재를 비교하여 어떤 DOM이 바뀌었는지 검사한다. 

 

동작방식)

element의 속성값만 변한 경우 속성값만 업데이트하고 element의 태그나 컴포넌트가 변경된 경우라면 해당 노드를포함한 모든 노드를 제거 (unmount) 한 뒤 Virtual DOM으로 대체한다.

이런 변경이나 업데이트가 마무리 된 후 결과를 DOM에 딱 한번 업데이트한다. 이렇게 비교를 통해서 DOM에서 바뀐 부분을 찾아 내는 것이다.

좌측에서 우측으로 변화를 했을 때  변화된 부분만 업데이트를 한다 는 소리임

 

Virtual DOM은 무조건 좋을까?

버츄얼돔이 리얼돔보다 무조건 빠르냐? 아니다

정보제공만하는 정적웹페이지에서는 아무런 인터렉션도 발생하지 않기에 그렇다면 리얼돔이 효율적일 수 있다.

diff알고리즘이 빠르긴 하지만 추가적인 작업이 발생하니 무조건 적용하진 않아도 된다.

 

 

 

---

참고자료 : 멋쟁이토마토