브라우저가 그려지는 원리 및 가상돔

리액트의 주요 특징 중 하나는 가상( Virtual ) 돔을 사용하다는 것이다.

그럼 가상돔에 대해서 알아봐야하는데 우선 가상돔을 왜 사용하는지 알기 위해서 

먼저 실제 ( Real ) 돔( DOM ) 에 대해서 알아보고 브라우저가 렌더링하는 과정에 대해서도 알아보자

 

HTML을 이용한 화면에 UI 표현하기

브라우저에서 UI를 볼 수 있는 것은 이 HTML 을 분석해서 보여줄 수 있기 때문이다.

이 HTML은 요소 ( Element ) 들로 구성되어 있다.

 

 

 

 

돔 이란? ( Document Object model )

위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을

의미한다.

 

 

 

 

돔 조작 

 

위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용해서 조작할 수 있다.

이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소 ( Element )를 수정하거나 없애거나 할 수 있다.

 

 

 

 

이렇게 DOM을 조작해서 화면을 변경시켜줄 때 브라우저 내부에서는 어떠한 과정을 통해서 바뀐 하면을 변경시켜주는지 알아보자.

 

 

 

웹 페이지 빌드 과정(  Critical Rendering Path CRP )

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다

웹 브라우저가 HTML 문서를 읽고 스타일 입히고 뷰포트에 표시하는 과정이다.

 

 

 

 

 

 

 

그럼 가상돔은 어떠한 식으로 작동 될까?

 

리액트에서는 항상 렌더링 이전의 객체(가상돔) 와 렌더링 이후의 객체 (가상돔) 를 가지고있다.

 

 

리액트에서는 어떠한 State(데이터)가 바뀌면 가상돔이 새로 생성된다.

그리고 이것을 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜준다

바뀐 부분을 찾는 과정을 Diffing 이라고 부르며 바뀐 부분만 실제 돔에 적용시켜 주는 것을

재조정( reconciliation ) 이라고 부른다.

 

 

Reconciliation & Batch Update
React keeps the in-memory virtual representation of the actual DOM and keep it sync with a batch update. This is called reconciliation. 

 

React는 실제 DOM의 메모리 내 가상 표현을 유지하고 배치 업데이트와 동기화를 유지한다

이것을 조정이라고한다.

 

여기서 리액트는 batch update를 이용해서 싱크를 맞춘다고 하는데 batch update는 무엇인가?

아래에 리액트 사이트를 봐도 리액트는 batch update를 하는 걸 볼 수 있다.

 

 

 

Batch Update in React.js

State를 업데이트 할 때 한거번에 업데이트해줘서 화면이 한번만 다시 그려지게 해준다.

 

결론

 

React는 Reconciliation을 통해서 만약 열개의 State데이터가 변한다면 DOM을 열번 반복해서 조작해주는 것이 아닌

Virtual DOM을 비교해서 한번의 DOM 조작으로 모든 변화를 반영시켜준다.

 

정리 

1. 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있으며 자바스크립트 객체 형태로 메모리에 저장되어 있는 복사본이다.

 

2. 리액트는 렌더링 이전의 내용을 담고 있는 가상돔과 변경 이후에 보일 내용을 담고 있는 가상 돔을 가지고 있다.

 

3. 변경이 되기 전 가상돔과 변경이 된 후의 가상돔을 비교하는 과정을 Diffing이라고 부른다.

 

4. Diffing을 통해서 변경된 부분들을 파악한 후 리액트는 Batch Update를 수행해서 실제 DOM 에 한 번에 적용시켜준다 이러한 과정을 ( Reconciliation ) 이라고 한다.