가상돔(Virtual DOM)

Virtual DOM

---

웹 성능 최적화를 위한 DOM관리 방법으로 웹 어플리케이션의 상태 변경 시 ,

객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 실제 DOM에 적용하는 것.

Virtual DOM의 동작순서

Diffing 이란?

가상 돔에서 변경점을 찾아내는 과정

Reconciliation 이란?

Diffing 으로 찾아낸 변경 점을 실제 돔에 적용 하는 과정

Virtual DOM의 동작예시

1. 어플리케이션이 렌더링 될 때, 어플리케이션의 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성한다.
2. 어플리케이션이 실행되면서 state나 props가 변경되는 부분이 있는 경우 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성합니다.
3. 새로운 돔이 생성 된 후 이전 버전의 Virtual DOM과 비교하여 변경점을 찾아낸다. (Diffing)
4. 변경점을 찾아낸 이후 변경부분만 실제 돔에 적용 (Reconciliation)
5. 또 다시 변경점이 나타날 경우 이전의 돔을 지우고 새로운 돔과 현재 돔을 재 비교한다.

Virtual DOM의 state 나 props 가 변경될 때마다 Diffing 나 Reconciliation 가 수행 되지는 않는다

→ 여러개의 상태 변화를 하나로 묶어 Batch Update를 하기 때문에 여러개의 상태 변화가 동시에 일어나도, 각각 수행이 아닌 한번에 모아서 처리한다. (setState action은 비동기로 동작하는 이유)