Virtual DOM

Virtual DOM?

Virtual DOM을 알기 전에 먼저 브라우저 렌더링 과정에 대해 알아야할 것 같습니다.

브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 어떤 주소를 요청하면 브라우저는 HTML, CSS, JavaScript, 이미지 등 렌더링에 필요한 리소스들을 서버로부터 응답을 받게 됩니다.

2. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱해서 DOM과 CSSOM을 생성하고 이를 결합해 렌더 트리를 만듭니다.

3. 브라우저의 자바스크립트 엔진은 서버로부터 받은 자바스크립트를 파싱해서 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를 통해서 DOM과 CSSOM을 변경할 수 있습니다. 이후 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.

4. 이 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 paint하면 마침내 사용자에게 브라우저 화면이 출력됩니다.

DOM은 이러한 과정이 계속 반복됩니다. 오타를 수정하는 사소한 일을 하더라도 DOM은 처음부터 다시 HTML을 파싱하여 DOM 트리를 만들고 CSSOM과 결합하여 렌더 트리를 만듭니다.

요즘 웹 사이트들은 수 많은 데이터로 이루어져 있으며, 데이터를 표현하는 요소들도 많습니다.

이러한 요소들을 DOM을 이용해 조작할 때마다 위의 과정들이 반복되기 때문에 비효율적이기도하고 성능이 저하될 수 있습니다.

리액트에서는 Virtual DOM이라는 추상화한 가상의 객체를 메모리에 만들어 놓는 방식을 사용해 DOM을 업데이트함으로써 DOM처리를 최소화하고 효율적으로 하게 됩니다.

Virtual DOM을 이용해 DOM을 업데이트 하는 과정

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전의 Virtual DOM에 있던 내용과 현재의 Virtual DOM 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.

요약하면, DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교해서 최소한으로 내용을 변경하는 것