렌더링(rendering)은 화면에 표시할 내용을 생성하고 그리는 과정입니다. 렌더링 비용이 높다는 것은 화면을 다시 그릴 때 시간, CPU, 메모리 자원을 많이 소모한다는 의미입니다.

특히 DOM이 트리 구조로 깊게 구성된 경우, 일부 요소만 변경하더라도 전체 하위 요소를 모두 다시 그리는 경우가 많아 성능 저하로 이어졌습니다.

그림 1-2 실제 DOM 기반의 요소 변경 방식

리액트는 이러한 문제를 해결하기 위해 가상 DOM이라는 개념을 도입했습니다. 가상 DOM(virtual DOM)은 실제 DOM을 복사한 자바스크립트 객체 형태의 트리 구조로, 메모리에서 관리합니다. 실제 화면에 구성 요소를 추가하거나 변경하면 리액트는 이를 가상 DOM에 먼저 반영합니다. 모든 추가 및 변경이 끝난 뒤에 가상 DOM과 실제 DOM을 비교합니다. 이 과정을 디핑(diffing)이라고 합니다.