3. VirtualDOM

가상 DOM에 대해서 이해하기 전에 DOM에 대해서 알아보자.

DOM 이란?

HTML 요소들을 담고 있는 웹페이지를 Document 라고 부른다. DOM은 이러한 HTML 요소들을 트리 형태로 표현한 것을 말한다. DOM은 Document Object Model 의 약어이며, 각 트리는 노드(Node)로 구성되어있다. DOM의 모든 것은 노드이다.

• Document Node(문서 노드)

  • 문서 전체를 나타내는 노드

• Element Node(요소 노드)

  • HTML 요소를 나타내는 노드

• Attribute Node(속성 노드)

  • HTML 요소의 속성을 나타내는 노드

• Text Node(텍스트 노드)

  • HTML 요소의 텍스트를 나타내는 노드

---

Virtual DOM 이란?

말그대로 가상의 DOM이며, 실제 DOM의 복제본이다. 실제 DOM을 조작하여 HTML 요소를 변경하려면 다음과 같은 과정을 거치게 된다.

• > HTML element 를 선택

• > 속성 변경

• > 새로운 HTML element 요소 생성

• > 생성된 HTML element 추가

• > 기존의 HTML element 제거

이러한 직접적인 DOM 조작을, React 에서는 가상 DOM을 통해서 수행한다. 가상 DOM이기 때문에 간접적으로 조작하며, 이를 통해서 성능을 향상시킨다. React에서는 상태와 가상 DOM을 통한 추상화를 통해 변화를 감지하고 최소한의 DOM 조작을 수행하여 성능을 향상시킨다.

가상 DOM을 활용하여 어떻게 DOM 조작을 하는가?

리엑트는 항상 두개의 가상돔 객체를 가지고 있다.

• 렌더링 이전 화면 구조를 나타내는 가상돔

• 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

그리고 리렌더링이 일어날 때 마다 새로운 내용이 담긴 가상 DOM을 생성한다. 랜더링 이전과 이후의 가상 DOM을 비교하여 어떤 HTML 요소가 변경되었는지 비교한다. React 는 이것을 위해서 Diffing Algorithm 를 사용한다.

React 에서 컴포넌트가 리렌더링 될 때

상태(state) 변경, 속성(props) 변경, 부모 컴포넌트의 리렌더링, 컴포넌트 생명주기 메서드 호출, 컨텍스트(Context) 변경

이 과정을 통해서 변경해야 하는 부분만 실제 DOM에 적용한다. 이 과정을 Reconciliation(재조정) 이라고 한다. 그런데 여기서 알아야 할 점은, 이러한 변경된 모든 HTML 요소들을 한 번에 실제 DOM에 적용한다는 사실이다.

어떤 페이지의 HTML 요소들이 1개가 변경되던지 10개가 변경되던지 상관없이, 이를 한 번에 감지하고 실제 DOM에 적용시킨다. 즉, 10개가 변경되었을 때 실제 DOM에 적용시키는 것을 10번 반복하지 않는다는 것이다.

그러나, 가상 DOM을 사용하는 이유가 퍼포먼스가 좋아서는 아니라고 한다. 빨라서 사용하는 것이 아니라(충분히 빠르긴 하다), 유지보수성이 뛰어난 것이 핵심이라는 것이다. 단지, 가상 DOM이 무엇이고 왜 쓰는지 이해하였다면, 최적화 할 수 있는 기법이 존재한다.

참조: Virtual DOM (React) 핵심정리