브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높다.
이를 개선하여 웹 애플리케이션의 성능을 최적화하기 위해 Virtual DOM이 등장했다.

Virtual DOM

DOM 노드 트리를 복제한 자바스크립트 객체

• class, style 등 속성 ⭕️

• DOM api 메서드 ❌

• 상태 변경이 발생할 때마다 전체 UI를 Virtual DOM에 반영하고, 이를 이전 상태와 비교하여 필요한 부분에 한해서 최소한의 DOM 업데이트를 수행하는 것이다. (⇒ 재조정)

• Virtual DOM을 업데이트하고 비교하는 일은 실제 DOM을 조작하지 않고 메모리 상에서 업데이트와 비교가 이뤄지기 때문에 가볍고 빠르게 수행된다.

---

React에서 Virtual DOM을 활용되는 과정

1. 상태변화 : 컴포넌트의 상태나 props가 변경되면 Virtual DOM이 다시 생성
2. 재조정(Reconciliation) : 비교 알고리즘을 이용해 새로운 Virtual DOM과 이전 Virtual DOM 간의 차이를 계산
3. re-render : 계산된 차이에 따라 실제 DOM에서 필요한 부분만 업데이트

React는 비교(diffing) 알고리즘 최적화 방법

1. 서로 다른 타입의 두 요소는 서로 다른 트리를 만들어낸다.
   • DOM 요소의 타입이 다르면 (예: <div>와 <span>), React는 비교를 수행하지 않고 해당 요소와 자식들을 모두 새로 생성한다. → 비효율적으로 보일 수 있지만, 실제로는 타입이 다른 경우가 보통 완전히 다른 컴포넌트로 교체되는 경우가 많아 효율적이다.
   • 동일한 타입의 요소라면, 동일한 내역을 유지하고 변경된 속성만 갱신한다.
2. key prop을 통한 자식 요소 식별
   • 같은 레벨의 자식 요소들을 비교할 때, React는 key를 사용하여 요소를 식별합니다. 이로 인해 리스트의 일부가 수정되더라도 전체 리스트를 다시 렌더링하지 않고, 실제로 변경된 요소만 업데이트한다.