☕
프론트엔드를 공부하다 보면 한 번쯤은 이런 문장을 보게 된다.
“리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다.”
그런데 처음 보면 이게 무슨 말인지 꽤 추상적으로 느껴진다.
이 문장이 실제로 무엇을 의미하는지, 그리고 왜 성능이 좋아지는지 정리해보았다.
1. DOM이란 무엇인가?
먼저 DOM(Document Object Model)부터 이해해야 한다.
웹페이지는 내부적으로 DOM 구조로 관리되는데, 쉽게 말하면
브라우저는 우리가 작성한 HTML을 그대로 사용하는 것이 아니라
트리 구조의 객체 형태(DOM)로 변환해서 관리한다.
예를 들어
<body>
<h1>제목</h1>
<p>내용</p>
</body>이 코드는 브라우저 내부에서 다음과 같은 구조로 관리된다.
- body
- h1
- p
이러한 구조를 DOM이라고 한다.
2. 문제: DOM을 직접 수정하면 느리다
웹에서 버튼 클릭, 데이터 변경, 입력값 변경 등으로 상태가 바뀌면 화면도 바뀌어야 한다.
이때 가장 직관적인 방식은 DOM을 직접 수정하는 것이다.
하지만 문제는
- DOM 수정은 비용이 크고
- 화면을 다시 계산해야 하고 (reflow)
- 다시 그려야 한다 (repaint)
즉, DOM을 자주 건드릴수록 성능이 떨어진다.
3. 해결 방법: 가상 DOM (Virtual DOM)
리액트는 이 문제를 해결하기 위해 가상 DOM(Virtual DOM)이라는 개념을 사용한다.
가상 DOM이란 실제 DOM을 흉내 낸 “자바스크립트 객체” 를 말한다.
사용자가 웹 애플리케이션을 열면 리액트는 초기 UI를 생성한다.
실제 DOM을 만드는 대신 가상 DOM 트리를 만드는데,
가상 DOM은 메모리에 존재하며 실제 화면에 표시되지 않는다.
즉, 리액트는 브라우저의 DOM을 직접 건드리지 않고
메모리 안에서 가짜 DOM을 하나 더 만들어서 작업한다.
4. 리액트의 동작 방식 💡
기존 방식은 변경이 발생할 때마다 DOM을 직접 수정하기 때문에 비효율적이고 느리다.
하지만 리액트 방식은
①
사용자가 어떤 상태 변경을 트리거(예: 버튼 클릭)하면,
리액트는 해당 변경을 감지하고 새로운 가상 DOM 트리를 생성한다.
이 트리에는 변경된 상태를 반영한 UI 요소가 포함된다.
②
이제 리액트는 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교한다.
(이 과정을 "재조정" 또는 "린더링"이라고 한다.)
리액트는 두 가상 DOM 트리를 비교하면서 어떤 부분이 변경되었는지를 효율적으로 찾는다.
③
변경된 부분만을 찾아내면, 리액트는 이 부분만을 실제 DOM에 반영한다.
이전과 새로운 가상 DOM 사이의 변경된 부분만을 조작하므로
전체 페이지를 다시 렌더링하지 않고도 업데이트가 가능하다.
정리하자면
- 상태(state)가 변경됨
- 새로운 가상 DOM 생성
- 이전 가상 DOM과 비교
- 변경된 부분만 실제 DOM에 반영
위와 같은 흐름으로 동작한다.
이것은 브라우저가 실제 DOM 조작에 비해 빠르게 처리할 수 있도록 도와주는 것이다.
5. 가상 DOM이 성능이 좋아지는 이유
기존 방식은 집을 고칠 때 전체를 다 부수고 다시 짓는 느낌이라면
리액트는 고장난 부분만 찾아서 고치는 느낌으로 비유할 수 있다.
가상 DOM이 성능이 좋아지는 이유의 핵심은 딱 하나다.
실제 DOM 접근을 최소화하기 때문
리액트는 Virtual DOM을 이용해 변경 사항을 비교한 뒤,
화면을 통째로 다시 그리지 않고, 바뀐 부분만 효율적으로 업데이트해서 빠르게 만든다.
(필요한 부분만 실제 DOM에 반영함으로써 성능을 최적화한다.)
정리
이러한 과정을 통해 리액트는 렌더링 성능을 최적화한다.
전체 페이지를 다시 렌더링하지 않고도 변경된 부분만을 업데이트하므로
사용자에게 빠른 응답성을 제공하면서도 불필요한 계산과 DOM 조작을 최소화한다.
가상 DOM은 단순한 개념처럼 보이지만 리액트의 전체를 이해하는 핵심이라고 볼 수 있는 것 같다.
'Dev > React' 카테고리의 다른 글
| 기존 Vite + React 프로젝트에 TypeScript 추가하기 (마이그레이션 정리) (0) | 2026.03.12 |
|---|---|
| 리액트 찍먹 3 - Component 컴포넌트 (1) | 2023.04.21 |
| 리액트 찍먹 2 (1) | 2023.04.14 |
| 리액트 찍먹 1 (1) | 2023.04.13 |
댓글