Virtual DOM

React는 상태 변경이 감지되면 Virtual DOM을 다시 그려 실제 DOM을 업데이트 한다.

• 잦은 DOM 조작은 비용이 많이 들고 속도가 느려진다.
• React는 Virtual DOM을 사용하여 성능(속도)을 향상시키는 방식을 채택
• Virtual DOM의 컴포넌트를 지속적으로 관찰하여 상태 변경을 감지하려 시도
• Virtual DOM의 이전, 이후 비교는 diff 알고리즘을 사용하여 효율적으로 처리
• 비교 결과 차이가 발생하면 실제 DOM에 반영해 UI를 업데이트

ReactDOM

ReactDOM 모듈은 React 요소로 구성된 Virtual DOM을 실제 DOM에 장착(Mount)시켜 렌더링(Rednering)하는 역할을 수행

// vNode -> 가상 DOM Tree (React 요소로 구성)
// domNode -> 실제 DOM 노드
ReactDOM.render(vNode, domNode)

ReactDOM.render 동작 방식
domNode의 콘텐츠를 제어합니다. 처음 호출할 때 기존의 DOM 요소를 교체하며, 이후 호출에서는 React의 DOM 비교(diffing) 알고리즘을 사용하여 보다 효과적으로 업데이트 합니다.

Virtual DOM을 사용하는 이유

UI는 사용자의 요구사항에 따라 수시로 업데이트 된다.
업데이트 과정에서 실제 DOM이 변경되면 업데이트 된 요소와 그 자식 요소를 다시 렌더링 해야 하는데, 이러한 일련의 과정이 UI 속도를 느리게 만든다..
UI 컴포넌트 개수가 많을 수록 렌더링 비용은 더욱 많이 들어 속도가 현저히 느려진다.

Virtual DOM은 실제 DOM에 직접적으로 조작하는 것이 아닌, 이전/이후 상태를 비교하여 변경 사항이 발생할 때 변경된 부분만 실제 DOM에 업데이트하므로 UI 속도를 크게 향상시킬수 있다

Virtual DOM 동작 방식

React는 인 메모리 데이터 구조 캐시를 만들고, 전/후 결과를 비교하여 차이를 계산한 다음 브라우저에 표시하는 DOM을 효과적으로 업데이트를 한다.
이를 통해 개발자는 마치 모든 페이지가 변경될 때마다 렌더링 되는 것처럼 코드를 작성할 수 있는데, 실제로 React는 실제 변경되는 하위 컴포넌트만 다시 렌더링 할 뿐이다.