[React] 가상돔 Virtual DOM

 

브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다.

 

첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다.

이때 브라우저는 새로운 DOM을 만든다.

(참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.)

 

두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다.

브라우저는 업데이트된 DOM을 만들고 기존에 있던 DOM은 전부 날리는 식으로 업데이트가 진행된다.

 

하지만 리엑트는 이것과 다르게 동작한다.

 

[리엑트의 렌더링 과정]

1.   내용이 바뀌어 업데이트된 DOM을 새로운 사본으로 만든 뒤, 그 사본에 업데이트된 항목을 표시한다.
2.   사본과 기존의 DOM을 비교하면서 달라진 점이 없는지 확인한다.
3.   DOM의 바뀐 부분이 있다면 그 부분만 브라우저가 새로 그린다.

 

여기서 기존의 방식과 소요 시간에서 큰 차이가 발생한다.

 

기존의 방식은 원래의 DOM을 다 지우고 새로운 DOM을 만든다는 것에서 큰 시간이 소요된다.

(다시 다 지우고 새롭게 만들어야 해서....)

 

하지만 리엑트는 바뀐 부분만 수정을 하기 때문에 시간이 빠르고 페이지 전환이 부드럽다.

 

이렇게 싱글 페이지, 즉 하나의 DOM만 있고, 변화된 부분만 선택적으로 바꿔주는 것을 싱글 페이지 어플리케이션 (SPA) 라고 한다.

 

바로 업데이트된 사본을 가상돔(Virtual DOM)이라고 한다.

실제로 사용되는 것이 아니기에, 가상(Virtual)이라는 말이 붙은 것이다.

 

 

 

 

[민승님이 보내주신 기술 내용을 제가 글만 보완해서, 민승님 블로그와 여기에 같이 업로드 한 글 입니다. ]

아래는 민승님 블로그

https://minprogramming.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8%EB%A5%BC-%EB%8B%A4%EB%A3%A8%EB%8A%94-%EA%B8%B0%EC%88%A0-1%EA%B0%95

[리엑트를 다루는 기술 1강]