Virtual DOM

React.createElement()을 통해 만든 객체(React Element Tree)가 Virtual DOM의 근간이 되는 데이터이다.

개발자들에게 조작하기 어려운 DOM을 직접적으로 제어하지 않게 하고 훨씬 쉬운 구조로 UI를 만들고 개발할 수 있도록 React가 중간에서 DOM 처리를 맡고 개발자들은 DOM과 비슷한 즉, HTML 태그와 비슷한 JSX 문법을 활용해 컴포넌트 베이스 개발 방식을 만들어 주는 것이 바로 Virtual DOM이다.

Virtual DOM의 미신

미신 → "Virtual DOM을 쓰는건 빠르기 때문이다."

• 속도는 사용하기에 충분히 빠른 정도?

• 핵심은 유지보수가 가능한 것 → 선언형 UI 작성

Virtual DOM의 가장 큰 이점

똑같은 코드베이스에서 다양한 플랫폼에 이식할 수 있는 것

1. React Native

React는 Virtual DOM을 만드는 jsx 문법을 통해 웹 브라우저는 DOM, native 플랫폼 환경에서는 UI Framework 코드로 변환하면 되는 것이기에 다양한 플랫폼에 이식할 수 있는 장점이 있다.

2. Next.js

서버에서 Virtual DOM을 문자열로 만들어 브라우저한테 전송하면 그것이 SSR이다.

DOM이란?

Document Object Model로 브라우저가 HTML 문서를 렌더링하는 과정에서 브라우저가 이해할 수 있는 구조로 파싱하여 얻는 트리 구조의 객체이다.

자바스크립트는 브라우저에서 제공하는 DOM API를 통해 DOM 객체의 접근 및 제어가 가능하다.

Real DOM과 Virtual DOM의 차이

Real DOM은 변경이 일어나면 해당 노드를 포함하는 모든 노드가 갱신될 수 있지만 Virtual DOM은 기존 Virtual DOM과 변경 될 Virtual DOM을 비교하여 실제로 달라지는 부분만 갱신한다.

Virtual DOM은 달라지는 해당 부분만 변경하고 변경이 필요한 부분을 일괄적으로 갱신하기 때문에 렌더링 성능을 향상시키는 것이다.

재조정(Reconciliation)

Virtual DOM이 React DOM 같은 라이브러리에 의해 실제 DOM과 동기화되는 과정

DOM이 업데이트 되는 사항을 React가 모두 파악하기 어렵기 때문에 DOM을 비교하는 것은 어렵다. 하지만 기존의 객체로된 Virtual DOM과 업데이트 될 Virtual DOM 객체를 비교하는 일은 비용이 훨씬 싸고 쉽다. 두 객체(Virtual DOM)를 비교해서 실질적으로 달라지는 부분만 DOM에 반영하여 동기화시키는 것이 재조정이다.

이러한 접근방식이 선언적 API를 가능케 한다. -> React에게 원하는 UI를 알려주면 DOM이 그 상태와 일치하도록 한다.

React가 중간에 행하는 복잡한 세부 동작들(DOM을 비교하여 업데이트된 부분만 골라내 실제 DOM과 동기화하는 과정 즉, 재조정)을 신경 쓰지 않고 어떤 UI를 렌더링 할지만 관심을 두는 선언적인 사고로 개발이 가능해진다.