React와 Virtual DOM 효율적인 렌더링이란?

React는 사용자 인터페이스를 구축하기 위한 선도적인 Javascript 라이브러리중 하나입니다. 또한 React의 핵심 개념 중 하나는

'Virtual DOM' 입니다. React에서는 기존 DOM을 사용하지 않고 왜 Virtual DOM이라는 것을 사용하는 것일까요?

 

웹 애플리케이션의 도전

웹 애플리케이션은 사용자 상호작용에 빠르게 반응해야 합니다. 초기 웹 개발에서는 단순한 페이지와 상호작용이 전부였지만, 현재는 복잡한 상태 관리와 동적인 UI 업데이트가 필요한 시대입니다. 이러한 환경에서 DOM의 직접적인 조작은 성능 저하를 일으킬 수 있습니다.

예를들어 대규모 사이즈의 웹 페이지를 렌더하고 UI를 업데이트하려고 시도했을때 DOM의 트리구조로 인해 위에서부터 다시 리렌더링을하면서 성능을 크게 저하 시켰습니다. 이 문제를 해결하기 위해 Virtual DOM이 등장했습니다.

Virtual DOM

DOM의 문제점

DOM은 HTML과 XML 문서의 프로그래밍 API 입니다. 웹 페이지의 객체 지향 표현 방식으로, 스크립트 또는 프로그래밍 언어가 페이지의 내용, 구조, 스타일을 읽고 조작할 수 있게 해줍니다. 그러나 DOM 조작은 비용이 많이 들고, 특히 복잡한 애플리케이션이나 대규모 프로젝트의 경우에서 성능 저하의 주요 원인이 됩니다.

Virtual DOM의 등장

Virtual DOM은 실제 DOM을 추상화한 가벼운 복사본입니다. React 에서는 이 Virtual DOM을 사용하여 웹 애플리 케이션의 효율적인 렌더링을 가능하게 합니다. Virtual DOM을 사용함으로써, React에서 실제 DOM에 발생할 수 있는 비효율적인 업데이트를 최소화합니다.

Virtual DOM 작동 원리

렌더링 사이클

React에서 렌더링 사이클은 크게 세 단계(렌더링, 비교(재조정), 업데이트)로 나눌 수 있습니다.

 

1. React Component가 상태 변경 등으로 인해 렌더링을 시작할 때, Virtual DOM에 그려집니다.
2. 이전 Virtual DOM 스냅샷과 새로운 Virtual DOM을 비교하여 실제 DOM에 필요한 최소한의 변경사항을 계산합니다.
3. 계산된 변경사항을 실제 DOM에 적용하여 UI를 업데이트 합니다.

Diffing 알고리즘

React의 Virtual DOM 비교 과정에서는 'Diffing 알고리즘' 이라는 것을 사용하게 되는데, 이 알고리즘은 두 Virtual DOM 트리를 비교하여 실제 DOM 업데이트에 필요한 최소한의 연산을 결정하고, React는 컴포넌트의 타입, 자식의 변경, 속성의 변경 등을 비교합니다.

한마디로 두개의 DOM을 비교하여 서로 달라진 점을 찾고 해당 부분을 업데이트 하는 방식입니다.

 

Virtual DOM을 사용하는 이유

위의 내용들을 보면 React에서 Virtual DOM을 사용함으로서 많은 이점을 제공합니다.

1. 성능 최적화 - 실제 DOM 조작을 최소화하여 성능을 향상시킵니다.
2. 효율성 - UI 상태의 변화에 집중할 수 있으며, React에서 효율적인 DOM업데이트를 보장합니다.
3. 유지 보수 용이성 - 컴포넌트 기반 아키텍쳐를 통해 웹 애플리케이션의 유지 보수성을 향상시킵니다.

결론

Virtual DOM은 React가 복잡한 웹 애플리케이션의 성능을 최적화 하면서 또한 개발자들에게도 경험을 개선하는 핵심 기술이라고 생각합니다. 이를 통해서 현대 웹 개발의 중요한 도전과제를 해결한 것과 마찬 가지이며 현재 React 의 트렌트성을 보면 많은 사람들이 사용하는 자바스크립트의 라이브러리입니다.

 

참고자료

[Virtual DOM과 Internals]

Virtual DOM과 Internals – React

https://medium.com/@surksha8/virtual-dom-and-real-dom-understanding-the-differences-da8f3fab4261