[React] Virtual Dom 이란 무엇인가

Virtual Dom 이란

Dom이란 객체를 통해 구조화된 문서를 표현하는 방법이다. 이러한 Dom은 트리형태로 되어있어서 특정 node를 찾을 수도 있고 수정, 삭제가 가능하다. 

Dom은 동적인 UI에 최적화되어있지 않기 때문에 jquery를 사용하여 동적인 효과를 줄 수 있다. 

하지만 대규모 웹어플리케이션 중 하나인 페이스북에서는 스크롤을 내리다보면 정말 수 많은 데이터가 로딩되고 각 데이터를 화면에 표시되게 해야할 요소들이 많아지게 된다. 

이와 같은 많은 요소들을 직접적으로 변화를 주다보면 성능에 문제가 발생한다. 

스크롤로인해 브라우저상의 Dom에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 렌더링해야하는등의 절차에서 성능상의 문제를 발생시킨다.

이러한 문제를 최소화하기위해 최소한의 Dom조작으로 작업을 처리하는 방식이 생겨났다.

그것이 바로 Virtual Dom이다. 

Virtual Dom은 변경 전과 변경 후의 상태를 비교한 뒤 변경이 생긴 부분의 최소한의 내용만 반영하여 성능을 향상시킨다.

React는 소스코드에 처음부터 HTML을 넣지않고 기본적인 HTML을 로드한 후 우리가 작성한 코드를 HTML에 밀어넣어 화면을 출력하여 기존보다 빠르게 동작한다.

Real DOM 과 Virtual DOM 비교

Virtual DOM을 추가적으로 설명하면

1. JSX를 렌더링한다. 그러면 Virtual DOM이 Update가 된다.

2. Virtual DOM이 이전의 Virtual DOM에서 찍어둔 Snapshot과 비교하여 변경된 부분을 찾는다.(이 과정을 diffing 이라고 부른다.)

3. 변경된 부분만 Real DOM에서 변경시켜준다.