오늘은 리액트의 특징중 하나인 Virtual DOM(가상돔)을 알아보자.

1. DOM

DOM(Document Object Model)이란 말 그대로 문서를 객체로 표현하는 모델을 의미한다. < html>, < head>, < body> 와 같은 태그들을 javascript가 접근할 수 있도록 객체로 만든 것 (메모리에 보관할 수 있는)을 의미한다.

Virtual DOM이 필요한 이유

요즘 대규모의 서비스를 제공하는 웹사이트들은 많은 데이터 및 요소들을 담고 있다.
이러한 대규모의 요소들이 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생한다고 알려져 있지만 실제로 DOM의 성능 자체는 자바스크립트가 일반 객체를 처리할 때의 성능과 비교하여 큰 차이가 없다고 한다

그러면 왜 가상 돔을 만들어 사용하는 것일까?

DOM의 업데이트 자체는 성능상의 이슈가 거의 없지만, DOM 업데이트 이후 CSS를 다시 계산하고 DOM 트리가 수정되며 Render Tree가 실시간으로 갱신된다. 즉 화면에서 10개의 수정사항이 발생하면 10번의 CSS 계산 및 Render Tree가 갱신된다는 것이다. 이 과정에서 많은 성능상이 문제가 발생하여 가상 돔을 활용한다.

2. Virtual DOM

실제 DOM과 같은 내용을 담고있는 복사본을 뜻한다.
이 복사본은 자바스크립트 객체 형태로 메모리에 저장되어 진다.

리액트는 항상 두개의 가상 돔을 가지고 있다.

• 첫번째 가상 돔 : 변경 이전의 내용을 담고있음
• 두번째 가상 돔 : 변경 이후 보여질 내용을 담고있음

실제 변경 내용이 DOM에 적용되기 전,

1. 리액트는 두 개의 가상 돔을 비교하여 정확히 어떤 부분의 변경 필요한지 파악한다. 이 과정을 Diffing라고 부른다.

2. Diffing을 통해 변경된 부분들을 파악하고 그것들을 하나하나 차례로 적용시키는것이 아니라 Batch(집단, 무리) Update 즉, 모든 변경 사항을 취합하여 DOM에 한번에 반영 시킨다. 이를 Reconciliation(재조정)이라고 부른다.

즉 React를 이용해 돔을 업데이트 하는 절차

1. 데이터가 업데이트 되면, 전체 UI를 가상 돔에 리렌더링한다.
2. 이전 가상 돔에 있던 내용과 현재 가상 돔의 내용을 비교한다.(Diffing)
3. 바뀐 부분에 한번에 실제 DOM에 적용한다.(Update, Reconciliation)

참고영상