[React] 브라우저 랜더링 방식 및 가상돔 사용 이유

이전 포스트에서 이야기했듯이 리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다

가상돔에 대해 알기 이전에 우선 가상돔을 왜 사용하는지 알기 위해서 브라우저가 렌더링하는 과정을 알아보자

 

브라우저 랜더링 과정

브라우저가 이해할 수 있는 언어는 4가지: HTML, CSS, JS, WebAssembly .

 

 

• DOM 트리 생성
  • 브라우저가 웹서버에서 HTML 문서를 다운 받아서 읽고, 문서의 구조와 내용을 나타내는 DOM(Document Object Model) 트리를 생성
  • HTML코드를 쭉 다가(파싱) 중간에 css를 만나 필요하면 css도 다운로드 받아 읽고, CSS 스타일 정보를 포함하는 객체 CSSOM(CSS Object Model) 트리 생성
  • HTML코드를 쭉 다가(파싱) 중간에  JS를 만나면 다운로드 받아 JS 해석이 끝날 때까지, 랜더링을 멈춤(JavaScript가 DOM이나 CSSOM을 조작할 수 있기 때문)
• Render 트리 생성
  
  • 브라우저는 DOM 트리와 CSSOM(CSS Object Model) 트리를 결합하여 최종 렌더 트리를 생성. 이 트리는 화면에 표시될 모든 노드와 그 스타일 정보를 포함
  • 이제 랜더트리를 바탕으로 그리는 일을 수행
• 레이아웃 (reflow)
  •  브라우저는 렌더 트리를 기반으로  각 요소를 어디에 어떻게 배치할 지 결정( 각 요소의 크기와 위치를 계산)
• 페인트 (Paint)
  • 실제 화면에 그리기 : 결정된 레이아웃에 따라 화면에 페인트가 되야지만 우리 눈에 보임

 

 

이것이 웹 브라우저가 렌더링을 하는 과정이다 

간단히 말하면, 웹 페이지를 보기 위해 브라우저는 먼저 필요한 파일들을 다운로드하고, 이를 해석하여 화면에 표시할 내용과 스타일을 결정한 다음, 이를 바탕으로 실제로 화면에 그리는 작업을 수행한다. 이 전체 과정을 브라우저 렌더링이라고 부른다.

 

여기서 문제점은

어떤 인터랙션에 의해 DOM이나 CSSOM에 변화가 발생하면, 그 때마다 렌더 트리가 재생성된다는 것이다.

어떤 것을 변경하느냐에 따라서 레이아웃과 페인트, 이 두 가지 과정이 다시 동작하는지가 결정된다

여기서 중요한 점은 레이아웃이 CPU를 많이 먹고, 페이팅이 GPU를 많이 먹는다

인터랙션이 적은 웹 페이지는 괜찮지만, 만약 인터랙션이 많다면?

작은 변화로 인해 위의 과정을 계속 거치게 되므로, 불필요하게 DOM을 조작하는 비용이 너무 커지게 된다.

따라서 불필요한 레이아웃을 줄일수록 랜더링 퍼포먼스에 대한 최적화가 좋다.

(페인트는 최적화할 수 있는 방법이 없음 .. 필수이기 때문에)

이러한 문제로 인해 나오게 된 것이 가상 돔 (Virtual Dom)이다. 가상 돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 된다

 

가상 돔의 동작 방식과 장점

인터랙션이 발생하면,  가상 DOM에 먼저 변화를 적용하고, 이를 실제 DOM과 비교한다.

변경된 부분만 실제 DOM에 적용함으로써, 전체 페이지를 다시 랜더링하는 비효율적인 과정을 줄인다.

이렇게 하면, 많은 양의 DOM 조작을 피할 수 있고, 불필요한 레이아웃(reflow)과 페인트(paint) 과정을 줄이므 성능을 크게 향상시킬 수 있다

바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라고 부른다.

 

+) 가상 돔은 JavaScript 객체로 구성되어 있으며, JavaScript 객체는 메모리에서 빠르게 접근하고 조작할 수 있어, 변경 사항을 효율적으로 추적 하고 실제 DOM에 최소한의 변경만 적용한다

 

이러한 가상 돔 덕분에 만약 요소가 30개가 변하였다고 하더라도 한 번에 묶어서 한 번의 실제 돔 수정으로 처리하게 돼서 돔을 조작하는 비용을 줄이게 된다.