[React] Virtual DOM 이해하기

 

Virtual DOM이란?

먼저 Virtual DOM을 이해하기 위해선 웹 브라우저가 어떻게 동작하는지를 알아야 하며 아래 글을 참고하면 좋다!

<브라우저 렌더링 과정 이해하기>

 

DOM(Document Object Model) 이란? 문서 객체 모델은 브라우저가 HTML 코드를 읽어서 웹페이지 구조를 아래처럼 트리형태로 표현한다.

 

그렇다면 화면을 업데이트 하고 싶을 때 어떻게 동작할까?

 

웹 브라우저가 화면을 업데이트 하는 건, 자바스크립트가 DOM을 수정할 때 발생하게 된다.

DOM이 변경되면 브라우저는 해당 변경 사항을 감지하고 다시 레이아웃을 계산하고 화면을 다시 그리게 된다.

하지만 이 레이아웃 계산과 페인팅 과정은 굉장히 오래 걸리는 작업이며 성능을 저하시킬 수 있다.

 

이런 문제를 해결하기 위해 Virtual DOM이 도입되었는데 가상 DOM은 실제 DOM의 사본이라고 생각하면 된다.

React는 업데이트가 발생하면 변경된 부분을 먼저 가상 DOM에 반영한다.

그 다음 가상 DOM과 새로운 가상 DOM을 비교해서 변경된 부분만 실제 DOM에 반영하게 된다.

이 과정에서 React는 불필요한 레이아웃 계산이나 페인팅 작업을 최소화해서 성능을 향상시킬 수 있다.

 

따라서, React의 Virtual DOM은 효과적인 업데이트 관리 도구로서 많은 상황에서 유용하게 사용된다.