서녕이네 개발단지

[React] Virtual Dom(가상 돔) 본문

프론트엔드/React

[React] Virtual Dom(가상 돔)

zero2-pooh 2023. 6. 9. 19:22

1. 개요

리액트 공부를 하고, 프로젝트를 한지 약 반년이란 시간이 지났다. 

Virtual Dom이 뭔지 대략적으로만 알고 있었지 이렇게 자세히 공부하기는 처음이다.. 그만큼 리액트에 대해 잘 모른 채 사용해 왔던 것.🥲

기술 블로그를 시작하며, 리액트에 대해 처음부터 심도 있게 알아가 보고자 한다.

이번 포스팅은 리액트의 특징 중 하나인 Virtual Dom (가상 돔)을 알아보겠다.  

 

2. Dom 이란?

 

  • DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.

문서 객체란❓ 

<html>, <head>, <body>... 와 같은 태그들을 javascript가 접근할 수 있도록 객체로 만든 것 (메모리에 보관할 수 있는)을 의미한다.

즉, 웹 페이지에 대한 인터페이스이다.

 

  • DOM은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.❗️(이 객체모델은 내부 API 로 연결되어 여러 언어에서 사용될 수 있다. 그래서 MDN에서는 api로 정의하기도 한다.)

출처&nbsp; https://wit.nts-corp.com/2019/02/14/5522

💡이처럼 노드(태그, 태그안에 Text나 속성 모두)들이 나무 같은 형태로 이루어진 것을 노드트리 라고 한다.  
그래서 HTML 태그를 요소노드(Element Node)라고 부르고,
=> 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 한다.

 

 

 사진과 같이 DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할이다.

 

 

 

2-1. Dom의 단점
  1. 100개 중에 하나만 변경되어도 전부 다 수정해서 화면에 다시 그리기 때문에 메모리 누수 및 비용이 들어가게 된다.
  2. 우리는 스크립팅 언어인 JS를 사용해 웹페이지를 변경시킨다
    1. 일반적인 앱에서, Dom 에는 수 천 개의 노드들이 존재할 수 있고, 업데이트를 위해 복잡한 처리 과정이 필요하다.
    2. ~이로 인해 브라우저의 속도는 느려지게 된다.
  3. 먼저 브라우저에서 페이지를 로드하게 되면 돔 트리와 렌더링 트리를 생성하고, 여러 과정을 거쳐 브라우저에 CSS가 적용된 페이지가 그려지게 된다.

결론은, DOM을 조작할 때 렌더링 트리는 각 변경 사항마다 하나씩 해석하여 렌더링을 시키게 되는 구조이다. 

그래서 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 하는데,

매번 새롭게 구성하기 때문에, 렌더 할 양이 많으면 속도가 느려지게 된다.

 

⚠️ 그렇다고 DOM은 꼭 느리다고 할 수는 없다. ⚠️

만약 규모가 작고 정적인 이전의 웹 애플리케이션이라면 일반 DOM이 성능 이 더 좋다.
상황에 따라 어느 쪽이 좋은지 다를 수 있다는 것이다.
하지만, 현재의 트렌드에는 맞지 않고, 최근 트렌드의 복잡한 SPA에서는 DOM 조작이 굉장히 빈번하게 발생하며, 그 변화를 적용하기 위해서는 브라우저가 많은 연산을 하게 되고, 결국 전체적인 프로세스가 비효율적이게 된다.
💡이를 보완해 Virtual Dom (가상돔)이 나온 것이다!

 

3. Virtual Dom 이란? 

  • 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 JS 객체를 이용해 사용한다.👉🏻 DOM의 구조를 흉내 낸 JavaScript  객체 (트리구조)이다. = 실제 (무거운) 돔의 가벼운 사본 같은 개념

 

리액트가 Virtual Dom(가상돔)을 반영하는 절차

출처 https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/

 

Virtual Dom은 DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하여 성능 향상을 이끌어낸다. 

 

1. Change of State : 상태 변화가 일어남. 

2. Diffing : 변화 전의 가상돔과 변화된 가상돔을 비교한다.

3. Re-render Virtual Dom : 바뀐 부분만 리렌더링 한다. 

 

👉🏻달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달

 

 


참고

https://wit.nts-corp.com/2019/02/14/5522

https://velog.io/@ctdlog/React-DOM이란-Virtual-DOM을-사용하는-이유

https://velog.io/@mollog/React에서의-가상돔-개념

 

'프론트엔드 > React' 카테고리의 다른 글

[React] Code Splitting (코드 분할)  (0) 2023.06.11
[React] Lazy Loading (지연 로딩), Suspense (서스펜스)  (0) 2023.06.11
[React] 렌더링 최적화  (0) 2023.06.11
[React] Rendering (렌더링 동작원리)(2)  (0) 2023.06.10
[React] Rendering (렌더링 동작원리)(1)  (1) 2023.06.10
'프론트엔드/React' Related Articles more