React - Virtual DOM

 

 

Virtual DOM이란 무엇인가?

우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미한다.

리액트의 주요 특징 중 하나이며, DOM을 빈번히 업데이트하는 것을 좀 더 효율적인 방법으로 업데이트하기 위해 만들어졌다.

 

그렇다면 DOM은 무엇인가?

DOM은 Document Object Model의 약어이다.

웹 페이지가 화면에 로딩되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다.

이 DOM을 더 간단히 설명하자면, 애플리케이션의 UI를 나타내며, HTML 파일의 JavaScript 표현을 말한다. 

애플리케이션 UI 상태가 변경 될 때마다 DOM은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능하다.

 

출처 : Stack Lerner

 

 

왜 DOM에 바로 접근하는 대신 Virtual DOM을 사용하여 접근하는 것인가?

그 이유는 바로 성능에 있다.

DOM을 자주 조작하면 성능에 많은 영향을 끼치기 때문에 속도가 느려진다.

그렇다고 DOM이 느리다는 것이 아니다.

DOM 자체는 빠르고, DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않다.

하지만, 웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 다시 구성하고, 페이지를 다시 칠하는데 이 과정에서 많은 시간이 허비되어 성능이 저하가 되는 것이다.

그렇기 때문에 Virtual DOM을 사용해야 하며, 이 방식을 통해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 만들어준다.

 

Virtual DOM의 작동 원리

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 가상의 DOM을 사용한다.

즉, DOM의 가벼운 사본 형태라고 보면 된다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교한다.  이 과정을 "diffing"이라고 한다.

3. 그러고 나서, 바뀐 부분만 실제 DOM에 적용한다. 

출처 :  https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

간단히 말해서 리액트에게 UI가 어떤 상태를 원하는지 알려주고 DOM이 해당 상태와 일치하는지 확인한다고 생각하면 된다.

 

Virtual DOM을 사용하면 DOM보다 무조건 빠른가?

Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니다.

리액트에서는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축을 할때 사용을 권장하고 있다.

즉, 이 말은 리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다. 

결국에는 적절하게 사용해야 리액트가 지닌 능력을 잘 발휘할 수 있다.

 

정리하자면,

• 빈번한 DOM 조작은 성능이 무겁고 느려지게 된다.

• Virtual DOM은 실제 DOM의 가상의 표현 즉, 사본 같은 형태이다.

• 상태 변경이 발생하면 Virtual DOM이 업데이트되고 이전 및 현재 버전의 가상 DOM이 비교된다. 이것을 "diffing"이라 부른다.

• 그런 다음 Virtual DOM은 배치 업데이트를 실제 DOM으로 보내 UI를 업데이트한다.

• React는 Virtual DOM을 사용하여 대규모 애플리케이션을 구축할 경우 성능을 향상시킨다.