리액트 Virtual DOM과 Real DOM / TIL#17

1. Vritual DOM(가상 DOM)의 필요성
2. Vritual DOM(가상 DOM)의 작동 방식

1. Vritual DOM(가상 DOM)의 필요성

    가상 DOM의 필요성을 알기 위해서는 실제 DOM이 어떻게 작동되는지 원리를 먼저 이해하는 것이 필요하다.

    브라우저에 화면을 띄우기 위해서는 HTML을 전달받고 이를 읽는 과정이 순서대로 일어나야한다.

1. DOM 트리와 CSSOM 트리를 생성한다.

2. 각각의 Parser 결과를 합쳐서(Attachment) 렌더트리를 생성한다.

3. 렌더트리 구조에 따라서 레이아웃(reflow) 과정(위치, 좌표 계산)을 거친다.

4. 레이아웃으로 계산된 결과를 패인팅 과정을 거쳐서 화면에 나타낸다.

브라우저에 화면을 나타내기 위해서 차례대로
생성(읽기) -> 통합 -> 계산 -> 그리기 순서의 작업을 거치게 된다.

이런 방식에서 DOM 요소에 변화가 생기면 계산 과정을 포함한 위 과정이 다시 일어나기 때문에 비효율적이다.

리액트는 SPA 작동 방식이기 때문에 빈번하게 DOM 조작이 일어나기 때문에 실제 DOM 외의 대안이 필요하다.

2. Vritual DOM(가상 DOM)의 작동 방식

    가상 DOM은 실제 DOM에 적용시킬 가상의 DOM을 추상화하여 변경사항을 적용시키고 계산된 결과만을 실제 DOM에 반영시킨다.

결과적으로 실제 DOM을 조작할 때 발생할 수 있는 많은 연산 작업 없이 한번만 DOM트리와 렌더트리를 구성하여 화면에 나타낼 수 있습니다.

해당 역할 자체는 버퍼로서 연산 작업을 따로 거친 후 결과만을 실제 DOM에 반영하는 것이기 때문에 수동작업으로도 구현할 수 있고 실제 성능 자체는 수동 작업이 더 빠르다고 알려져있습니다.

    하지만 리액트에서 제공되는 가상 DOM의 장점은 추상화와 더불어 자동적으로 변경된 값이 적용되기 때문에 변경된 요소에 대해서 따로 신경 쓸 필요가 없습니다.

리액트에서 알아서 변경된 요소만을 가상 DOM에서 조작하고 실제 DOM에 적용시키기 때문에 '충분히 빠름'과 동시에 효율적으로 SPA 구현이 가능하게 됩니다.