[React] Virtual Dom 이란

Virtual Dom

Virtual Dom = Virtual(가상) + Dom(Document Object Model, 문서 객체 모델)이다.

가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이고, 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

Dom 이란?

DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.
그렇다면 여기서 말하는 문서 객체란 무엇일까?
문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.

가상돔이 나오게 된 이유

어떠한 태그의 속성이나 값을 변경하려고 할때 DOM에 접근하는 자바스크립트 메서드를 사용하여 변경한다.

가령 h1 태그의 색상을 변경한다고 가정했을때 우리는 document.getElementById('h1의 id')로 먼저 접근한다.

 

이렇게 되면 두가지 측면에서 아쉬운 점이 있다.

1.  메모리 누수와 속도
2.  코드량

1. document.getEelementById를 사용하면 DOM을 탐색하는 과정에서도 메모리 누수가 일어나고 만약 값을 변경했다면

다시 렌더링 되는 과정을 반복한다.

이 과정이 한페이지에서 여러번 반복하면 성능 측면에서 매우 비효율적이라는 말이다.

 

2. 코드량이 방대해진다... document.getEelementById 보더라도 굉장히 길다. 또한 id의 이름은 항상 고유하게 유지해야 하므로 네이밍 하기도 벅차다.

 

이런 고민속에서 탄생한게 Virtual DOM(가상 돔)이다.

리액트가 가상돔을 반영하는 절차

특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는 다음과 같다.

 

1.변화가 일어났다. 변화된 버전을 가상돔으로 바꾸자.

• 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.

2.가상돔끼리 비교하자.

• 변화 전의 가상돔과 변화된 가상돔을 비교한다.

3.변화 전의 가상돔과 변화된 가상돔을 비교한다. 바뀐 부분만 적용하자.

• 바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.
  (ex. 네비게이션(컴포넌트)을 열었을 때 특정 영역(컴포넌트)이 빨갛게 변하면서 위치가 변경되는 경우의 레이아웃 계산이 일괄로 단 한 번만 이행)

결론

Virtual DOM을 사용하는 이유는 기존에 자바스크립트로 DOM에서 어떠한 요소를 수정했을때 DOM에 접근하여 그것을 수정하고 다시 처음부터 재랜더링하는 과정이 성능상 비효율적이고 코드가 복잡해지는 문제를 해결하고자 고안되었다.

 

Virtual DOM의 작동 방식은 변화가 일어나면 Virtual DOM을 생성하고 변화 전의 Virtual DOM과 변화 후의 Virtual DOM을 비교하여 바뀐 요소들만 실제 DOM에 적용한다.