리액트 Virtual DOM

 

리액트에서 Virtual DOM이란?

 

Virtual DOM은 리액트가 사용하는 가상의 DOM 구조입니다. 실제 DOM과 유사하지만, 메모리에 가상으로 존재하는 가벼운 사본입니다. 리액트는 이 Virtual DOM을 사용하여 UI 변화를 효율적으로 관리하고 렌더링 성능을 최적화합니다.

 

 

Virtual DOM을 사용하는 이유

1. 성능 최적화:
   • 최소화된 DOM 업데이트: 실제 DOM 조작은 성능에 큰 영향을 미칩니다. 리액트는 Virtual DOM을 사용하여 변경 사항을 먼저 가상으로 계산한 후, 필요한 부분만 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 조작을 줄이고 성능을 최적화합니다.
   • 배치 업데이트: 여러 변경 사항을 한 번에 처리하여 최적의 방법으로 DOM을 업데이트합니다.
2. 간단한 프로그래밍 모델:
   • 명령형에서 선언형으로: 개발자는 UI가 어떻게 변경되는지에 대한 세부 사항을 신경 쓸 필요 없이, 상태(state)에 기반하여 UI를 선언적으로 정의할 수 있습니다. 리액트는 상태 변화에 따라 Virtual DOM을 업데이트하고 이를 실제 DOM에 반영합니다.
3. Cross-browser Compatibility:
   • 추상화된 DOM: Virtual DOM은 브라우저 호환성을 걱정하지 않고 동일한 방식으로 동작합니다. 리액트는 내부적으로 브라우저 간 차이를 처리하여 일관된 API를 제공합니다.

 

Virtual DOM 작동 원리

1. Initial Rendering:
   • 컴포넌트가 처음 렌더링되면, 리액트는 Virtual DOM을 생성하고 이를 실제 DOM으로 변환하여 화면에 표시합니다.
2. State/Props 변경:
   • 상태(state)나 속성(props)이 변경되면, 리액트는 새로운 Virtual DOM 트리를 생성합니다.
3. Diffing:
   • 리액트는 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diffing)하여 변경된 부분을 찾아냅니다. 이 과정에서 효율적인 알고리즘(React의 경우, Reconciliation 알고리즘)을 사용하여 최소한의 변경 사항을 계산합니다.
4. Re-rendering:
   • 변경된 부분만 실제 DOM에 반영합니다. 이 때, 불필요한 DOM 업데이트를 피하기 위해 배치 처리(batch updates)와 같은 최적화 기법을 사용합니다.

 

예시

다음은 Virtual DOM이 어떻게 작동하는지에 대한 간단한 예시입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;​

 

1. 초기 렌더링: Counter 컴포넌트가 처음 렌더링될 때, Virtual DOM이 생성되고 이를 기반으로 실제 DOM이 생성되어 화면에 표시됩니다.
2. 상태 변경: 버튼을 클릭하여 count 상태가 변경되면, 새로운 Virtual DOM이 생성됩니다.
3. Diffing: 리액트는 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여, 변경된 부분(카운트 숫자)을 찾아냅니다.
4. 업데이트: 리액트는 변경된 부분만 실제 DOM에 반영하여 화면을 업데이트합니다.

 

요약

• Virtual DOM은 리액트가 UI 변화를 효율적으로 관리하기 위해 사용하는 가상의 DOM 구조입니다.
• 성능 최적화와 개발 편의성을 제공하며, 브라우저 간 호환성 문제를 추상화합니다.
• Diffing 알고리즘을 통해 최소한의 변경 사항만 실제 DOM에 반영하여, 불필요한 DOM 조작을 줄이고 성능을 개선합니다.