Dom과 Virtual Dom(가상돔)에 대한 개념을 명확하게 알기 위해 글을 작성하게 되었습니다.

1. Dom과 Virtual Dom(가상돔)이란?

Dom과과 Virtual Dom은 웹페이지의 구조를 프로그래밍 언어를 통해 조작하고 접근할 수 있도록 표현해주는 인터페이스(웹 페이지의 구조와 상태를 프로그래밍 언어로 접근하고 조작하는 매개체)라고 할 수 있습니다. 이 두 가지 인터페이스는 웹페이지를 트리구조로 나타내어 개발자들이 웹페이지의 요소들을 효과적으로 조작하고, 웹페이지의 상태를 관리하도록 돕습니다. 하지만 이 둘은 각각의 동작 방식과 목적이 다르기 때문에 이 두 개념을 구분하여 이해하는 것이 중요합니다.

2. Dom(Document Object Model) 이란?

DOM은 웹 페이지를 구성하는 HTML, XML 문서의 각 요소를 객체로 표현하고, 이 객체들 사이의 관계를 표현하는 트리 구조입니다. 이 트리 구조의 각 노드는 HTML 태그 등의 웹 페이지 구성 요소를 나타냅니다. DOM은 이런 구조를 통해 웹 페이지의 내용, 구조, 스타일 등을 JavaScript를 통해 동적으로 조작할 수 있게 해줍니다.

웹페이지의 내용, 구조, 스타일 등을 동적으로 변경할 수 있게 해주는 인터페이스이지만, DOM 조작은 자원을 많이 소모하는 비용이 큰 작업으로 알려져 있습니다. 그래서 Dom은 웹 페이지를 표현하고 조작하는 강력한 방법이지만, 대규모 웹 애플리케이션에서 DOM을 직접 조작하면 성능 이슈가 발생할 수 있습니다. 왜냐하면 DOM 조작은 비용이 큰 작업이고, 특히 변경이 빈번하게 일어나는 경우 브라우저의 레이아웃 계산과 리페인트 과정이 반복되어 성능에 부담을 줄 수 있기 때문입니다.

3. Virtual Dom 이란

Virtual DOM은 Dom의 문제를 해결하기 위한 기술로, DOM의 추상화 된 복사본을 메모리에 유지하는 기술입니다. 이는 실제 DOM과 동일한 API를 제공하지만, 변경 사항이 생길 때마다 실제 DOM에 즉시 반영하는 대신 메모리 내의 가상 DOM을 먼저 변경합니다.

그 후에는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만을 실제 DOM에 적용(update)하는 과정(이를 리렌더링이라 부릅니다)을 거칩니다. 이렇게 하면 실제 DOM을 불필요하게 자주 조작하는 것을 피하고, 성능을 개선할 수 있습니다.

React.js는 가상 DOM 개념을 가장 잘 활용한 라이브러리 중 하나로 알려져 있습니다. 그러나 이 가상 DOM 개념은 React에 한정 된 것이 아니라 다른 프론트엔드 라이브러리나 프레임워크에서도 사용되고 있습니다. 단지 React는 가상 돔을 사용하여 UI를 업데이트하는 데 선두적인 역할을 했기 때문에 잘 활용한 라이브러리로 알려져 있습니다.