React - DOM과 Virtual DOM

01. 브라우저가 렌더링 되는 원리

 

 

(1) 개요

리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려줍니다. 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 빠릅니다.

 

(2) DOM

(2)-1. DOM이란?

 

가상 돔(Virtual DOM)을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있어요. 브라우저를 돌아다니다 보면 수많은 컴포넌트로 구성된 웹페이지들을 보게 돼요. 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 해요.

 

DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이에요!

 

트리의 요소 하나하나를 ‘노드’라고 부르고, 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공해요.

 

(2)-2. DOM 사용 예시

// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.
document.getElementById("demo").innerHTML = "Hello World!";

// p 태그들을 모두 가져와서 element 변수에 저장해줘
const element = document.getElementsByTagName("p");

// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘
const x = document.getElementsByClassName("intro");

 

 

(3) 가상DOM(Virtual DOM)

 

(3)-1. 가상DOM이란?

 

리액트는 가상 DOM을 이용해서 실제 DOM을 변경하는 작업을 상당히 효율적으로 수행해요.

 

실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것보다 훨씬 더 빠르게 조작을 수행할 수 있어요.

실제 DOM을 조작하는 것보다, 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가볍습니다

 

가상 DOM이 실제 DOM을 변경하는 것은 아니라면, 도대체 어떻게 화면이 바뀌게 되는 것일까요?

 

 

(3)-2. DOM 조작 과정

 

만일 인스타그램의 좋아요 버튼을 누른다면

출처 : https://mainia.tistory.com/5280

 

화면이 바뀌어야 하죠. 저 빨간색 하트에 해당되는 엘리먼트 DOM 요소가 갱신돼야 한다는 거예요. DOM을 조작해야 한다는 의미입니다.

 

[STEP 1]

이 과정에서 리액트는 항상 2가지 버전의 가상 DOM을 가지고 있어요.

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
2. 화면 갱신 후 보여야 할 가상 DOM 객체

리액트는 state가 변경돼야만 리렌더링이 되죠. 그때, 바로 2번에 해당되는 가상 DOM을 만드는 거죠.

 

[STEP 2 : diffing]

state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고 있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악해 내요.

 

[STEP 3 : 재조정(reconciliation)]

파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시켜 줘요. 적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용을 시켜요(Batch Update )

 

(3)-3. Batch Update

 

리액트가 state를 batch 방법으로 update 한다는 것은 변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법을 의미하기도 하죠!

<클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면>

• 실제 DOM : 5번의 화면 갱신 필요
• 가상 DOM : Batch Update로 인해 단 한 번만 갱신 필요

 

(4) 브라우저 렌더링(페인팅)

React가 실제 DOM을 업데이트하면, 이 변경 사항은 브라우저의 렌더링 엔진에 의해 화면에 반영됩니다. 브라우저 렌더링 과정은 다음과 같습니다:

1. 스타일 계산: HTML과 CSS를 분석하여 각 요소의 스타일을 계산합니다.
2. 레이아웃: 각 요소의 위치와 크기를 계산합니다.
3. 페인팅: 레이아웃 단계에서 계산된 정보를 바탕으로 요소를 화면에 그립니다.

브라우저의 렌더링과 리액트의 렌더링은 엄연히 다른 독립적인 프로세스입니다.