Understanding Virtual DOM

DOM을 추상화 한 모델

DOM vs Virtual DOM

ReactDOM의 render() 메서드는 가상 DOM을 실제 DOM에 마운트 시켜, 렌더링 하는 역할을 수행합니다.

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

ReactDOM.render 동작 방식

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

가상 DOM을 사용하는 이유?

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

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

가상 DOM 동작 방식

React는 인 메모리 데이터 구조 캐시를 만들고, 전/후 결과를 비교하여 차이를 계산한 다음 브라우저에 표시하는 DOM을 효과적으로 업데이트 합니다. (참고)

이를 통해 개발자는 마치 모든 페이지가 변경될 때마다 렌더링 되는 것처럼 코드를 작성할 수 있는데, 실제로 React는 실제 변경되는 하위 컴포넌트만 다시 렌더링 할 뿐입니다.

• 잦은 DOM 조작은 비용이 많이 들고 속도가 느려집니다.

• React는 가상 DOM을 사용하여 성능(속도)을 향상시키는 방식을 채택했습니다.

• 가상 DOM의 컴포넌트를 지속적으로 관찰하여 상태 변경을 감지하려 시도합니다.

• 가상 DOM의 이전, 이후 비교는 diff 알고리즘을 사용하여 효율적으로 처리합니다.

• 비교 결과 차이가 발생하면 실제 DOM에 반영해 UI를 업데이트 합니다.

Youtube Playlist

Virtual DOM 재생목록 영상 강의는 가상 DOM의 각 모듈 작동 방식에 대해 안내합니다.

1. 환경설정 ←

2. 실제 DOM model 컨트롤

3. DOM model 컨트롤

4. 가상 DOM 가상 트리 비교 후, 패치

5. 가상 DOM 배열 데이터 순환 처리

6. 가상 DOM 제거버튼

7. 가상 DOM 추가버튼