[react] Virtual DOM 가상 돔

chatGPT 가상 돔 이미지 (정적인 느낌)

 

가상 돔에 대해 변경된 부분만 실제 돔에 적용하여 성능을 향상시킨다 정도의 내용만 알고 있었는데 이번 기회로 가상 돔에 대해서 정리해서 실제 리액트 개발을 할 때 이해도를 좀 높이고자 합니다.

 

브라우저 동작 방식

브라우저는 HTML과 CSS를 파싱하여 각각 DOM, CSSOM을 생성한다.
이후 두 트리를 결합해 렌더 트리(Render Tree) 를 만들고,
레이아웃(Layout) → 페인트(Paint) → 합성(Composite) 단계를 거쳐 최종 화면에 그려낸다.

이 과정 중에서 DOM을 자주 조작하거나 스타일 속성이 자주 변경되면 리플로우(Reflow) 또는 리페인트(Repaint) 가 발생한다.
이는 브라우저 렌더링 성능에 부담을 주는 작업으로, 과도하게 일어나면 사용자 경험을 해칠 수 있다.

 

이 문제를 좀 해결하고자 virtual dom을 사용해 볼 수 있을 것이다.

 

Virtual DOM 이란?

Virtual DOM은 실제 DOM의 구조를 흉내 낸 메모리상의 JavaScript 객체 트리이다.

React는 컴포넌트를 렌더링할 때, 이 Virtual DOM을 생성하여 UI의 현재 상태를 메모리상에 저장하고,
변경이 발생하면 이전 Virtual DOM과 비교하여 실제 DOM에 필요한 부분만 최소한으로 반영한다.

 

예를 들어 아래와 같은 jsx문법이 있습니다. 

function App() {
  return (
    <div id="app">
      <h1>Hello, React!</h1>
      <p>가상 DOM 예시입니다.</p>
    </div>
  );
}

 

위의 코드가 가상 dom 객체 구조로 나타내면 아래와 같은 모습이다

const virtualDOM = {
  type: 'div',
  props: {
    id: 'app',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello, React!',
        },
      },
      {
        type: 'p',
        props: {
          children: '가상 DOM 예시입니다.',
        },
      },
    ],
  },
};

Virtual DOM의 동작 방식

1. 상태(state)나 props가 변경되면 새로운 Virtual DOM이 생성된다.
2. 이전 Virtual DOM과 비교(diffing 알고리즘)하여 변경된 부분을 찾는다
3. 실제 DOM에는 변경된 부분만 최소한으로 업데이트한다.

이렇게 함으로써 불필요한 리플로우와 리페인트를 줄이고 성능을 향상시킬 수 있다.

 

 

 

리액트 렌더링 과정은 아래 페이지에서 정리하였습니다.

https://express.tistory.com/22

[react] 리액트의 렌더링 정리

 

 

왜 사용하지?

1. 성능이 향상된다.

- 직접 DOM을 조작하면 리페인트, 리플로우 현상으로 인해 많은 리소스를 소모한다.

- 하지만 virtual dom을 사용하면 변경된 부분만 배치처리하여 성능이 향상된다.

 

2. 개발이 편해진다.

- 개발자가 ui의 현재 상태를 선언적으로 정의할 수 있다.

- 리액트가 이 선언된 상태를 기반으로 ui를 자동으로 업데이트해준다.

- 복잡한 dom조작을 하지 않아도 간결하게 코드를 작성할 수 있다.

const ul = document.createElement('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});
document.body.appendChild(ul);

 

위와 같이 바닐라 자바스크립트로 작성하면 엘리먼트를 만들어주고 그 안에 텍스트와 태그를 이동하는 등의 복잡한 코드를 작성해야 한다.

<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

 

위 리액트 환경에서는 선언적으로 코드를 작성 시 리액트에서 알아서 처리해 준다.

 

 

결론

가상 dom에 대해 알아보았습니다. virtual dom이 사실 객체 트리라는 것과 이전의 가상 dom과 새 가상 dom을 비교하여 변경된 부분을 한 번에 실제 dom에 반영한다는 디테일한 사실을 새롭게 알게 되었다.

 

실제로 React를 사용할 때 상태 업데이트가 비동기적으로 처리되는 것처럼 동작해서
내가 예상했던 값과 실제 값이 달라 혼란스러웠던 경험이 있었다.
하지만 이번에 virtual dom의 배치 처리 개념을 정리하면서 React의 동작 방식을 더 깊이 이해할 수 있었고,
그동안 헷갈렸던 부분들이 명확하게 정리되어 많은 도움이 되었다.

 

 

참고문서

https://velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

https://yong-nyong.tistory.com/80

[React] 가상 돔(Virtual DOM)이 무엇이고 왜 중요할까요?

https://d2.naver.com/helloworld/2690975

https://wikidocs.net/273873

3. Virtual DOM의 이해