[React] Virtual Dom 이란?
Virtual Dom
React가 관리하는 가상의 DOM 으로, 실제 DOM과 동일하며 자바스크립트 객체로 나타낸 것입니다. 실제하지 않고 메모리에만 존재하는 프로그래밍 개념입니다. 렌더링이 필요할때 DOM 전체를 렌더링 하지 않고 이 가상 DOM을 통해 원본 DOM트리와 비교하여 변경된 부분만 렌더링 될 수 있게 해줍니다.
사용하는 이유
실제로 DOM을 다시 렌더링 하게 되면 리플로우(Reflow)와 리페인팅(Repainting)에 많은 비용이 발생하게 됩니다. 이를 최소화 시켜서 비용절감을 이루고 동시에 사용자에게 더 빠른 이용경험을 제공하기 위해 사용하게 되었습니다.
동작원리
가상 DOM을 사용한 React의 동작원리는 다음과 같습니다.
- 각 UI는 개별 컴포넌트이며, 각 컴포넌트는 고유한 상태(
State)를 가집니다. - React는 관찰 가능한 패턴(
observable patterns)을 따르고 상태의 변화를 관찰합니다. - 컴포넌트의 상태가 변경될 때마다 React는 가상 DOM 트리를 업데이트하지만 실제 DOM 트리는 변경하지 않습니다.
- React는 업데이트 후 가상 DOM의 현재 버전을 이전 버전과 비교합니다.
- React는 가상 DOM에서 어떤 객체가 변경되었는지 알고, 실제 DOM의 객체를 대체하여 최소한의 조작 작업만 수행합니다.
이 과정을 차별화(differentiation) 라고 합니다.
변경된 노드를 확인하면 가상 DOM트리의 이전버전과 현재버전을 비교하고 변경된 UI를 표시하기 위해 부모 하위트리를 전부 렌더링 합니다. 이렇게 업데이트 된 트리는 배치를 통해서 실제 DOM에 한번에 전송됩니다. 변화가 발생할때마다 실제 DOM에 바로 전송되는 것이 아니라, 가상 DOM을 통해 변화 부분을 비교하고 변화된 부분을 일괄로 전송하기 때문에 비용을 절감 할 수 있습니다.
