[React] VDOM(Virtual DOM)이란?

DOM이란?

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해, 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재한 것이 DOM이다. 모든 요소들을 각각의 객체로 만들고 이들 객체를 부자 관계로 표현할 수 있는 트리 구조로 DOM이 구성되어 있으므로 DOM tree라고도 부른다.

 

이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 프로퍼티와 메소드를 갖는 자바스크립트 객체를 통해 DOM에 접근하여 동적 변경을 할 수 있다. 이를 DOM API(Application Programming Interface)라고 부른다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.

 

DOM | PoiemaWeb

 

DOM과 Virtual DOM의 차이는 무엇인가?

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 재조정이라고 한다.

 

이 접근방식이 React의 선언적 API를 가능하게 한다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 한다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화한다.

 

Virtual DOM과 Internals – React

 

Reconciliation(재조정) 과정은 무엇인가?

React는 선언적 API를 제공하기 때문에 갱신이 될 때마다 매번 무엇이 바뀌었는지를 걱정할 필요가 없다. 이는 애플리케이션 작성을 무척 쉽게 만들어주지만, React 내부에서 어떤 일이 일어나고 있는지는 명확히 눈에 보이지 않습니다. 리액트 공식 문서에서 소개하는 “비교 (diffing)” 알고리즘들은 다음과 같다.

 

리액트의 재조정 방법

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다. <a>에서 <img>로, <Article>에서 <Comment>로, 혹은 <Button>에서 <div>로 바뀌는 것 모두 트리 전체를 재구축하는 경우이다.
2. 같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신한다.
3. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. key를 추가하여 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다.

재조정 (Reconciliation) – React

 

선언적 API이란?

함수형 프로그래밍은 선언적 프로그래밍(declarative programming)이라는 더 넓은 프로그래밍 패러다임의 한 가지입니다.
선언적 프로그래밍은 필요한 것을 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지 기술하는 데 방점을 두고 애플리케이션의 구조를 세워 나가는 프로그래밍 구조 입니다. 반면에 명령형 프로그래밍은 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍 스타일입니다.

 

선언적 접근 방식이 더 읽기 쉽고, 그래서 더 추론하기 쉽습니다. 각 함수가 어떻게 구현 되었는지는 함수라는 추상화 아래에 감춰집니다. 각각의 작은 함수에는 그 함수가 하는 일을 잘 설명하는 이름을 붙어 있고, 그런 함수들이 조합된 방식을 보면 데이터를 불러와서 저장하고 출력하는 과정이 잘 드러납니다. 근본적으로 선언적 프로그래밍은 추론하기 쉬운 애플리케이션을 만들어내며, 애플리케이션에 대한 추론이 쉬우면 그 애플리케이션의 규모를 확장하는 것도 더 쉽기 마련입니다.

 

그래서 우리는 리액트의 선언적 API를 통해 프로그램의 유지보수를 훨씬 쉽게 할 수 있다. 변경 사항이 발생하면 그것들을 일일히 수정하는 것이 아니라 변경된 VDOM을 리액트에게 주면 리액트가 알아서 비교 알고리즘으로 실제 DOM과 비교 후 바뀐 부분만 실제 DOM에 적용시켜준다는 것이다.

 

명령형 프로그래밍과 선언적 프로그래밍 비교