[공부하면서 쓰는] 리액트 Virtual Dom

1. 개요 

이번 글에서는 리액트에서 사용하는 virtual dom에 대해 다뤄보려고 합니다. 

 

2. 목차

virtual dom이란?
virtual dom이 동작하는 방식 
virtual dom이 성능 최적화하는 이유?
react에서 virtual dom이 필요한 이유
virtual dom을 사용하는 리액트 장점
글을 마치며 

 

 

Virtual DOM이란?  

 

정의 : virtual dom은 리액트에서 사용하는 가상의 DOM 트리입니다. 실제 DOM과 달리 메모리 내에서 가볍게 처리되며,

변화가 생기면 이를 효율적으로 업데이트 해주는 역할을 합니다. 

 

Virtual DOM이 동작하는 방식 

virtual dom은 변경이 발생할 때 새로운 virtual dom 트리를 생성하고 이전 상태의 virtual dom과 비교합니다. (diffing)

패칭 : 차이가 발견된 경우 실제 dom에 필요한 부분만 업데이트하는 방식으로 성능을 최적화합니다. 

 

✅ 예시코드  

import React, { useState } from "react";

function Counter() {
  //useState로 상태 관리
  const [count,setCount] = useState(0);
  
  // 상태를 변경하는 함수 
  const increment= () => {
    setCount(count+1) // 상태가 변경될때 리액트는 virtual dom을 업데이트
  };
  
  return (
   <div>
     <h1>Counter : {count} </h1> // 상태 값에 따라 업데이트 
     <button onClick={increment}>count</button> //버튼을 클릭했을 때 카운터 증가 
   </div>
  )
}

 

 

 

 - 리액트 컴포넌트가 상태( state)를 변경할때 

먼저 상태가 변하면 새로운 virtual dom이 생성되고 나서 리액트는 이전 virtual dom과 새로운 virtual dom을 비교합니다 (diffing)  그 후  차이가 있는 부분만 실제 dom에 반영합니다 (patching)

 

* Virtual dom이 성능을 최적화하는 이유?

 

➡ 빠른 업데이트 : DOM조작에 있어 비용이 많이 들기 때문에 Virtual DOM은 여러 변경 사항을 한꺼번에 처리하여 실제 

DOM에 최소한의 조작만 가하도록 합니다. 

➡ 배치 작업 : 리액트는 상태 변화가 발생할 때마다 곧바로 DOM을 업데이트하지 않고 여러 상태 변화를 모아 한꺼번에

처리합니다. 이를 통해 불필요한 리랜더링을 방지해줍니다. 

 

리액트에서 Virtual DOM이 필요한 이유 

 

1. 개발자 경험 향상 : 리액트의 Virtual DOM 덕분에 개발자는 복잡한 DOM 조작에 신경 쓰지 않고

상태 변화에만 집중할 수 있습니다. 

2. 브라우저 호환성 유지 : Virtual DOM은 리액트가 어떤 브라우저에서도 일관된 성능을 유지할 수 있게 도와줍니다. 

 

Virtual DOM을 사용하는 리액트의 장점

 

1. 빠른 성능 : DOM 조작이 최소화되어 빠른 렌더링이 가능하며 특히 SPA (Single Page Application) 에서

큰 성능 향상을 제공합니다

2. 효율적인 업데이트 : 복잡한 애플리케이션에서 효율적으로 화면을 업데이트할 수 있음