[ Web ] DOM과 Virtual DOM에 대하여

DOM과 Virtual DOM에 대한 내용입니다.

DOM ( Document Object Model )

DOM( 문서 객체 모델 )은 웹 문서를 위한 프로그래밍 인터페이스입니다. 이는 웹 페이지의 구조와 콘텐츠를 트리와 같은 개체 구조로 나타내며 프로그램이나 스크립트가 문서의 콘텐츠, 구조 및 스타일과 상호 작용하고 조작할 수 있도록 합니다.

DOM은 웹 개발의 중요한 구성 요소이며 동적인 대화형 웹 페이지를 가능하게 합니다.

DOM의 중요 내용

1. 트리 구조: DOM은 웹페이지를 트리 구조로 표현합니다. 각 HTML 요소, 속성 및 텍스트 콘텐츠는 이 트리에서 노드로 표시됩니다.
2. 자바스크립트 상호 작용: 개발자는 자바스크립트를 사용하여 DOM에 액세스하고, 수정하고, 조작할 수 있습니다. 예를 들어 HTML 요소의 콘텐츠를 변경하거나, 요소를 추가 또는 제거하거나, 사용자 상호 작용에 응답할 수 있습니다.
3. 크로스 플랫폼: DOM은 플랫폼에 구애받지 않으며 다양한 프로그래밍 언어와 함께 사용할 수 있지만 가장 일반적으로 자바스크립트와 함께 사용됩니다.
4. 동적 업데이트: DOM의 주요 목적 중 하나는 웹 페이지에 대한 동적 업데이트를 허용하는 것입니다. 전체 페이지를 다시 로드할 필요 없이 대화형 기능을 만들고, 콘텐츠를 업데이트하고, 사용자 작업에 응답할 수 있습니다.
5. 이벤트 처리: DOM을 사용하면 이벤트 리스너를 등록하여 click, keypress, mouse move와 같은 사용자 작업에 응답할 수 있습니다.
6. 순회: DOM Tree를 순회하여 노드 사이를 이동하고, 특정 요소를 찾고, 문서 구조를 탐색할 수 있습니다.

 

Virtual DOM

Virtual DOM은 React와 같은 웹 개발 프레임워크의 맥락에서 주로 사용되는 개념이자 기술입니다.

이는 표준이나 별도의 기술이 아니라 웹 애플리케이션의 렌더링을 최적화하기 위한 패턴입니다. Virtual DOM은 실제 DOM을 추상화한 형태로 존재하며 웹 애플리케이션의 성능을 향상시키는데 사용됩니다.

 

Virtual DOM의 주요 내용

1. 메모리 내 표현: 가상 DOM은 실제 DOM을 메모리 내 표현합니다. 실제 DOM Tree의 경량 복사본입니다.
2. 조정: 애플리케이션의 상태가 변경되면 가상 DOM을 사용하여 새 상태와 이전 상태 간의 차이를 계산합니다. 이 과정을 조정이라고 합니다.
3. 일관 업데이트: 가상 DOM 업데이트는 일반적으로 함께 일괄 처리되며 직접적인 DOM 조작보다 더 효율적인 방식으로 수행됩니다.
   이 일괄 처리는 실제 DOM에 대한 실제 변경 횟수를 줄여줍니다.
4. 향상된 성능: 가상 DOM은 실제 DOM에 대한 업데이트 횟수를 줄임으로써 웹 애플리케이션의 성능을 크게 향상시켜 보다 원활한 사용자 경험을 제공할 수 있습니다.
5. 컴포넌트 기반: 가상 DOM은 React와 같은 컴포넌트 기반 라이브러리 및 프레임워크에서 자주 사용됩니다. 각 구성 요소는 가상 DOM 표현을 유지하며 구성 요소 수준에서 효율적으로 변경이 이루어집니다.

 

React에서 Virtual DOM이 작동하는 방식

1. 구성 요소의 상태가 변경되어 다시 렌더링이 시작됩니다.
2. React는 업데이트된 구성 요소와 그 하위 항목을 나타내는 새로운 Virtual DOM Tree를 구성합니다.
3. React는 새로운 Virtual DOM Tree를 이전 트리와 비교하고 차이점을 계산합니다.
4. 업데이트된 상태를 반영하기 위해 실제 DOM에 필요한 변경 사항만 적용됩니다.

 

Virtual DOM은 실제 DOM에 대한 업데이트를 최적화함으로써 웹 애플리케이션, 특히 복잡한 사용자 인터페이스를 갖춘 웹 애플리케이션의 성능을 향상시키는데 도움이 됩니다. 이는 현대의 자바스크립트 프레임워크와 라이브러리에서 핵심적인 기능이지만 가장 일반적으로 React와 연관되어 있습니다.