[React JS] Virtual DOM이란 무엇인가??

이번에 React JS관련 공부를 진행하면서 기본적인 이론과 더불어 정리를 해 나가고자 한다.

먼저 Virtual DOM이다.

Virtual DOM ??

우리가 DOM은 많이 들어봤을 것이다.

예를 들어, 아래와 같은 HTML 코드가 있다고 가정해보자.

<!DOCTYPE HTML>
<html>
<head>
  <title>사슴에 관하여</title>
</head>
<body>
  <h1>사슴에 관한 진실.<h1/>
</body>
</html>

그렇다면 우리는 HEAD 태그 아래 TITLE태그가 존재하고 BODY 태그 안에 H1 태그가 존재한다.

이와 같이 트리형태로 구성되어있는것이 DOM구조 이다.

그런데 React 에서는 Virtual DOM을 사용한다.

쉽게 말하자면, 실제 DOM을 건드리고 조작하는 방식이 아닌 실제 DOM을 모방한 가상의 DOM을 구성하여 차이점을 골라내 변경된 부분만 Rerendering 시켜주는 방식으로 동작한다.

제일 주된 이유는 부드러운 UI를 사용자에게 제공할 수 있다는 점이다.

우리가 JS를 통해서 이벤트를 발생시키면 상당히 무거운 동작이 흐른다. 때로는 웹페이지를 새로고침하여 다시 렌더링해야하고, 때로는 더 긴 로직을 수행해야 할 때가 있다.

가상 DOM을 사용하게 된다면, 특정 UI의 변경만을 감지하고 특정 UI 부분만 다시 렌더링 해준다.
특정 부분만 다시 렌더링 해준다면 훨씬 가볍고 부드러운 UI동작이 나올 수 밖에 없는것이다.

더 자세한 설명은 아래의 이미지를 보자.

UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다. (실제 화면 상에 렌더링 되는 것이 아니라 비교를 위한 가상 렌더링이다.)
현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
변경된 부분을 실제 DOM에 반영한다.

React Virtual DOM 비교 원리와 얕은 비교

React 가상 돔(Virtual DOM) React에서는 가상 돔을 사용한다. 이 가상 돔은 실제 DOM(Document Object Model)을 조작하는 방식이 아니라 실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과 비교해서 달라진 부

babycoder05.tistory.com

[React JS] memo, useMemo 그리고 useCallback (0)	2024.05.05
[React JS] useState 동작방식 (0)	2024.03.31