가상 DOM 편집하기

== 개요 ==
'''가상 DOM(Virtual DOM)'''은 [[자바스크립트]] 라이브러리나 프레임워크([[리액트]], [[Vue]], [[Angular]] 등)에서 DOM(Document Object Model)을 효율적으로 관리하고 업데이트하기 위해 사용하는 기술이다. 가상 DOM은 실제 DOM의 가벼운 사본을 메모리에 생성하여 변경 사항을 빠르게 처리하고, 이를 실제 DOM에 반영한다.

이 접근 방식은 [[리액트]]가 대중화한 개념으로, UI 렌더링의 성능을 개선하고 개발자의 생산성을 높이기 위해 설계되었다.

== 작동 원리 ==
가상 DOM은 다음과 같은 단계를 통해 동작한다:

# '''가상 DOM 생성''': 애플리케이션의 상태에 따라 가상 DOM을 메모리에 생성한다. 이는 실제 DOM과 동일한 구조를 가지지만, 메모리에서만 존재하는 객체이다.
# '''변경 사항 탐지''': 애플리케이션의 상태가 변경되면 새로운 가상 DOM을 생성한다. 이전 가상 DOM과 새로운 가상 DOM을 비교(diffing)하여 변경된 부분을 탐지한다.
# '''실제 DOM 업데이트''': 변경된 부분만 실제 DOM에 적용(patching)한다. 이 과정을 통해 전체 DOM을 다시 그리는 과정을 줄이고 성능을 최적화한다.

<syntaxhighlight lang="javascript">
const element = React.createElement('h1', null, 'Hello, world!');
// 가상 DOM을 생성
console.log(element);
</syntaxhighlight>

== 특징 ==
가상 DOM은 다음과 같은 특징을 가진다:

* '''효율성''': 실제 DOM 업데이트는 비용이 많이 드는 작업이다. 가상 DOM을 통해 변경 사항을 메모리에서 먼저 처리함으로써 실제 DOM의 업데이트 횟수를 줄인다.
* '''추상화''': 개발자는 DOM 조작을 직접 처리하지 않고, 선언적으로 UI를 작성할 수 있다.
* '''디버깅 용이''': 가상 DOM을 사용하면 UI 상태를 예측 가능하게 만들고, 상태 변경 시의 동작을 추적하기 쉽다.

== 장단점 ==
=== 장점 ===
* 변경 사항을 효율적으로 처리하여 성능을 개선한다.
* 선언적 프로그래밍 방식으로 코드의 가독성과 유지보수성을 높인다.
* 크로스 브라우저 호환성을 보장한다.

=== 단점 ===
* 작은 프로젝트에서는 가상 DOM의 도입이 오히려 복잡성을 증가시킬 수 있다.
* 대규모 애플리케이션에서는 diffing 알고리즘의 비용이 무시할 수 없을 만큼 커질 수 있다.
* 가상 DOM은 만능이 아니며, 특정 상황에서는 수동으로 DOM을 조작하는 것이 더 효율적일 수 있다.

== 가상 DOM을 사용하는 프레임워크 ==
* '''[[React]]''': 가상 DOM 개념을 대중화시킨 대표적인 프레임워크. UI 업데이트를 효율적으로 처리하기 위해 Virtual DOM을 활용한다.
* '''[[Vue]]''': Vue는 가상 DOM을 사용하면서도 직접 DOM 조작을 허용하는 옵션을 제공하여 유연성을 보장한다.
* '''[[Preact]]''': 리액트와 유사한 API를 가진 경량 라이브러리로, 가상 DOM을 활용한다.
* '''[[Angular]]''': Angular도 가상 DOM을 사용하지만, [[Zone.js]]와 변경 감지를 통해 가상 DOM 사용 여부를 내부적으로 최적화한다.

== 대안 ==
최근에는 가상 DOM 대신 다른 방식으로 성능을 개선하는 시도가 있다:
* '''[[Svelte]]''': 컴파일 타임에 DOM을 직접 조작하는 코드를 생성하므로, 가상 DOM을 사용하지 않는다.
* '''Incremental DOM''': [[Google]]에서 개발한 방식으로, DOM 업데이트를 직접 제어한다.
* '''Fine-Grained Reactivity''': [[Solid.js]]와 같은 라이브러리는 상태 변경에 따른 영향을 세밀하게 추적하여 필요한 부분만 업데이트한다.

== 기타 ==
가상 DOM이 항상 실제 DOM보다 빠른 것은 아니다. 성능은 애플리케이션의 구조와 규모, 상태 변경 패턴에 따라 달라진다. 예를 들어, 작은 규모의 애플리케이션에서 간단한 요소를 업데이트할 때는 실제 DOM을 직접 조작하는 것이 더 효율적일 수 있다.

<syntaxhighlight lang="html">
<!-- 실제 DOM을 직접 조작하는 예시 -->
<button onclick="document.getElementById('message').textContent = '안녕하세요!';">
  클릭하세요
</button>
<p id="message">여기를 클릭해보세요.</p>
</syntaxhighlight>

반면에, 가상 DOM을 사용하면 오히려 불필요한 연산이 추가될 수 있다.

<syntaxhighlight lang="javascript">
// React를 사용한 가상 DOM 예시
function App() {
  const [message, setMessage] = useState('여기를 클릭해보세요.');
  return (
    <div>
      <button onClick={() => setMessage('안녕하세요!')}>클릭하세요</button>
      <p>{message}</p>
    </div>
  );
}
</syntaxhighlight>

또한 가상 DOM의 도입으로 웹 애플리케이션 개발의 생산성과 유지보수성이 크게 향상되었으나, 불필요하게 남용되는 경우도 많다. 예를 들어, 단순한 정적 페이지에까지 가상 DOM 기반의 프레임워크를 적용하면 오히려 로딩 속도가 느려지고 복잡성이 증가할 수 있다. 따라서 애플리케이션의 특성과 요구사항에 맞게 적절한 도구를 선택하는 것이 중요하다.

== 참고 자료 ==
* [https://react.dev React 공식 문서]
* [https://vuejs.org Vue 공식 문서]

<!-- 분류 -->
[[분류:웹 개발]] [[분류:프론트엔드]]