[React] Virtual DOM

🧐 React Virtual DOM 이란?!

React같은 SPA 라이브러리에서는 효율적인 렌더링을 하기 위해 실제 DOM오브젝트의 복사본 혹은 추상화를 하여 diffing 알고리즘이나 reconciliation 프로세스를 통해 실제 DOM과 동기화해서 실제 DOM에서 변경된 부분만 감지해서 렌더링을 수행하기 위해서 리액트가 생성하는 가상 DOM 오브젝트를 Virtual DOM 이라고 한다.

 

reconciliation 이 어떤식으로 동작하는지는 별도의 글을 써서 알아보기로 하고 지금은 Virtual DOM 에 집중해보자

 

1. 왜 React는 Virtual DOM을 쓰지? 🤔

왜 리액트는 Virtual DOM 을 쓰는지 이해하기 위해선 브라우저가 실제 그림을 그리는 렌더링 과정을 이해할 필요가 있다.

1. DOM 생성 : 브라우저는 HTML을 받아서 DOM(Document Object Model) 트리를 만든다 이 트리는 웹 페이지의 모든 요소와 속성, 그리고 관계를 나타낸다

2. 렌더 트리 생성 : CSSOM (CSS Object Model) 과 DOM을 합쳐서 렌더트리를 만든다. 여기서 보이지 않는 요소는 제외된다. ex) display: none 

3. 레이아웃 : 렌더링 엔진은 각 노드가 화면의 어떤 위치에 어떻게 배치되어야 하는지 계산한다.

4. 페인팅 : 각 요소의 색상, 이미지등 실제 내용을 화면에 그린다.

 

렌더링은 위 과정을 거치는데 인터랙션에 의해서 요소가 바뀔때 마다 모든 DOM을 처음부터 다시 그려야 한다면 사용자가 경험측면에서도 좋지 않고 앱이 커질수록 속도가 느려지게 될 수 있다.

 

예를 들어서 어떤 게시글의 좋아요를 누른다거나 장바구니의 수량조절 버튼을 눌러서 숫자를 변경한다던지 그러한 동작들이 발생할때마다 모든 DOM의 렌더링과정을 다시 계산한다면 비효율적일 것이다.

 

그래서 React는 Virtual DOM을 사용해 전체 DOM을 다시 그리는게 아니라 실제 바뀐 부분만 따로 인식해서 그 DOM만 다시 그리도록 업데이트 한다

 

💡 브라우저 별 렌더링 엔진

- Chrome, Opera, Edge 에서는 Blink 라는 구글의 오픈소스 렌더링 엔진을 사용한다.
- Firefox는 Gecko라는 자체 개발 엔진을 사용한다.
- Safari는 Apple이 개발한 Webkit엔진을 사용한다.

😎 https://csstriggers.com/ 라는 페이지에 들어가보면 각 렌더링 엔진 별로
어떤 css 옵션이 위 렌더링 과정중 어떤 과정이 일어나고 안일어나는지 정리해놓았다

2. Virtual DOM의 동작 원리✨

Virtual DOM은 실제 DOM트리와 비슷하지만 다르다.

예를 들어 아래와 같은 HTML코드가 있다고 가정하면

<div id="app">
  <h1>Hello, world!</h1>
</div>

생성되어지는 Virtual DOM은 다음과 같은 형태를 가지게 된다.

{
  type: 'div',
  props: { id: 'app' },
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Hello, world!']
    }
  ]
}

위 객체에 나와있는것처럼 해당 요소의 태그 이름과 속성 그리고 자식요소들의 정보 등등 해당 요소가 어떤 정보들을 가지고 있는가에 대한 정보들이 담겨있다 

 

이처럼 DOM과 같은 속성들을 가지고 있지만 실제 DOM과의 차이점은 실제 DOM이 가지고 있는 api들은 가지고있지 않다는 점이다.

ex) getElementById, querySelector 등등

이런 가벼운 Virtual DOM을 메모리에 저장해 가지고 있다가 상태 변경이 일어나면 새로운 Virtual DOM을 생성 이전의 Virtual DOM 과 비교해서 바뀐부분만 실제 DOM에 업데이트 한다.

💡 Virtual DOM은 실제 렌더링을 하지않고 메모리에서 동작하기 때문에 빠른 연산이 가능하다!

또한 모든 변경사항마다 Virtual DOM을 생성하는것이 아니고 여러 변경사항이 발생했을때 변경사항을 모두 합쳐서 한번에 업데이트를 수행한다 이를 batch 업데이트라고 하는데 React의 상태 업데이트가 비동기로 동작하는 이유이기도 하다

 

아래 예시 코드를 보자

// 예시

const [number, setNumber] = useState(0)

const increaseNum = () => {
	setNumber(number + 1)
	setNumber(number + 1)
	setNumber(number + 1)
}

예시 코드처럼 number가 어떤 엘리먼트에 할당되어있다고 가정했을때 increaseNum 함수를 실행한다면 어떻게 될까?

일반적으로는 세번의 함수가 실행되었으니까 숫자 3이 증가해야한다고 생각할 수 있다.

하지만 위에서 언급했다시피 리액트는 여러 변경사항이 생겼을때 하나하나 업데이트하는게 아니고 모든 변경사항을 합쳐서 한번에 업데이트 하기 때문에 결과적으로 실제 number는 1이 된다.

 

이런식으로 연산횟수를 줄여서 연산하기 때문에 실제 DOM의 리렌더링과정보다 효율적인 연산수행이 가능해진다.

 

Virtual DOM은 결국 DOM의 상태변화를 효율적인 연산과정을 통해 계산하고 실제 DOM에 반영하는 과정을 React가 추상화 자동화 해놓은 것이다.

3. JSX

jsx는 자바스크립트의 확장 문법이다 우리가 일반적으로 React 컴포넌트에서 아래와 같이 작성하면

const element = <h1 className="greeting">Hello, world!</h1>;

바벨에 의해서 아래와 같이 리액트 엘리먼트 객체로 변환이 된다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

이렇게 React.createElement로 생성된 React Element는 Virtual DOM과 같은 가상요소로 가볍고 상태를 가지지않고 불변성을 유지한다.

ReactDOM.render(element, document.getElementById('root'))

위 코드처럼 ReactDOM의 render에 의해서 실제 DOM 엘리먼트로 만들어진다.

 

그런데 위에서 언급했듯이 리액트 엘리먼트는 불변성을 유지해야하기 때문에 데이터가 변경되었다고해서 자식이나 속성을 마음대로 변경 할 수 없다.

 

그렇다면 리액트는 어떻게 UI를 업데이트 한다는 소리인가?! 🤔

 

그 방법은 새로운 요소를 만들어서 ReactDOM.render에 전송하는 방법이다.

 

예를 들어서 

import React, { useState } from 'react';

function Example1() {
  return <div>Example 1</div>;
}

function Example2() {
  return <div>Example 2</div>;
}

function App() {
  const [showExample1, setShowExample1] = useState(true);

  return (
    <div>
      {showExample1 ? <Example1 /> : <Example2 />}
      <button onClick={() => setShowExample1(!showExample1)}>
        Toggle
      </button>
    </div>
  );
}

export default App;

위 코드처럼 상태변화에 따라 다른 컴포넌트를 그려줄때 Virtual DOM을 사용한다고 할때

먼저 모든 React DOM 엘리먼트는 대응하는 Virtual DOM object 를 가지고 있고 그 Virtual DOM이 DOM 하나하나에 매핑되고 데이터가 변경되었을때 바뀐 데이터를 바탕으로 React.createElement 로 새로운 JSX 엘리먼트를 생성해 렌더링한다! 그리고 이때 모든 Virtual DOM object를 업데이트 한다 

위에서 언급했다시피 Virtual DOM을 업데이트 하는것은 비용이 많이 들지 않는다 그래서 이 업데이트 된 Virtual DOM을diffing 알고리즘을 통해 이전의 Virtual DOM 스냅샷이랑 비교해서 정확히 어떤 요소가 바뀌었는지 검사하고 변경이나 업데이트가 마무리 되면 실제 DOM 에 업데이트를 해준다

 

🌞 diffing 알고리즘에 대한 간단한 설명 

1. 엘리먼트의 속성 값만 변한 경우 새로운 Virtual DOM을 생성하지 않고 속성 값만 업데이트 해준다
2. 엘리먼트의 태그 또는 컴포넌트가 변경된 경우 해당 노드를 포함한 자식노드를 제거한 뒤 새로운 Virtual DOM을 생성해 대체 해준다!

🚨 무조건 Virtual DOM이 좋은가?

성능이 좋더라도 Virtual DOM 을 생성하고 비교하는 추가작업이 들어가기 때문에 인터랙션이 없는 단순 정보제공 페이지라면 DOM트리의 변화가 발생하지 않아 일반 DOM의 성능이 더 좋을 수 있다!