React Virtual DOM

React가 웹 개발 생태계에서 가장 인기 있는 라이브러리로 자리잡은 데에는 여러 이유가 있습니다. 그중에서도 Virtual DOM은 React의 핵심 기능 중 하나로, 웹 애플리케이션의 성능을 획기적으로 개선하는 데 큰 역할을 했습니다. 이 글에서는 Virtual DOM의 개념, 작동 방식, 그리고 그 장점에 대해 자세히 알아보겠습니다.

📍Virtual DOM이란?

Virtual DOM은 실제 DOM의 가벼운 복사본이라고 할 수 있습니다. 이는 메모리 상에 존재하는 JavaScript 객체로, 실제 DOM의 구조를 반영합니다. React는 이 Virtual DOM을 사용하여 실제 DOM 업데이트를 최적화합니다.

⚙️ Virtual DOM의 작동 방식

1. 초기 렌더링
React는 컴포넌트를 처음 렌더링할 때 Virtual DOM 트리를 생성합니다.
이 Virtual DOM 트리를 기반으로 실제 DOM이 생성됩니다.
2. 상태 변경 발생
데이터가 변경되면 React는 새로운 Virtual DOM 트리를 생성합니다.
이 과정은 매우 빠르게 진행되며, 메모리 상에서만 이루어집니다.

3. 비교(Diffing) 알고리즘
   React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교합니다.
   이 과정을 "재조정(Reconciliation)"이라고 합니다.
   변경된 부분만을 정확하게 파악합니다.

4. 배치 업데이트
   파악된 차이점만을 실제 DOM에 적용합니다.
   이를 통해 불필요한 DOM 조작을 최소화합니다.

Virtual DOM의 장점

✔️ 실제 DOM 조작을 최소화하여 성능을 향상시킵니다.
✔️ 여러 변경사항을 일괄 처리하여 리플로우/리페인트를 줄입니다.
✔️ Virtual DOM은 플랫폼 독립적이며 React Native 등에서도 동일한 원리를 적용할 수 있습니다.
✔️ DOM 업데이트 최적화는 React가 자동으로 처리합니다.

예시

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

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

위 코드에서 버튼을 클릭하여도 Virtual Dom이 작동하게 됩니다.

🤖 : 버튼 클릭 -> count 상태 변경 -> New VirtualDOM 생성 -> 이전 값과 새로운 값 비교 ->p태그 텍스트 업데이트

그렇기때문에 VirtualDOM이 언제나 좋은 영향이 있는 것은 아닙니다.

주의할 경우:

1) 초기로드
✔️ VirtualDOM 이 메모리를 사용하기 때문에 매우 간단한 정적 페이지의 경우에 오버헤드가 될 수 있습니다.

2)극도의 성능이 필요한 경우
✔️ 초당 많은 프레임 이상의 업데이트가 필요한 경우에는 직접적인 DOM조작이 효율적일 수도 있습니다.

🧷 결론

Virtual DOM은 React의 핵심 기능으로, 현대 웹 개발에서 성능과 개발 효율성을 모두 잡은 훌륭한 해결책입니다. 특히 복잡한 웹 애플리케이션에서 그 진가를 발휘하며, React의 선언적 프로그래밍 모델을 가능하게 하는 핵심 기술입니다.