React Virtual DOM 과 Reconciliation, 그리고 Fiber Reconciler (덜 작성함)

이 글에서는 React Virtual DOM과 Reconciliation이 내부적으로 어떻게 작동하는지에 대해 알아보도록 하겠습니다.

 

Virtual DOM에 대해 말하기 전에 브라우저 렌더링 프로세스와 DOM에 대한 이해가 필요합니다.

브라우저 렌더링 프로세스는 해당 아티클을 읽어보고 오시면 되겠습니다.

 https://oreeyo00.tistory.com/7 

Rendering (렌더링) 이란?

 

Virtual DOM

 

DOM을 JavaScript 객체로 표현한 것입니다.

상태 중심 UI 개발을 달성하기 위해 JS Libraries & Frameworks에서 구현한 개념입니다.

이는 React가 상태 변경을 일괄 처리하고 원활한 상태 전환을 처리하는 데 도움이 됩니다.

흔히들 React는 브라우저 DOM 트리에서 업데이트가 필요한 부분만

다시 렌더링하는 데 도움이 된다고들 알고있습니다.

 

하지만 문제는 Vanilla JS를 사용하여 DOM을 조작하면

항상 전체 페이지가 다시 렌더링되는 것처럼 보이지만,

이는 사실이 아니라는 점 입니다.

 

왜냐하면 최신 브라우저는 Vanilla JS를 사용해서 업데이트된 요소만 변경할 수 있기 때문이죠.

예시를 들어 설명하기 위해 2개의 간단한 시계 프로젝트

(Vanilla JS를 사용해서 만든 시계와 React를 사용해서 만든 시계) 를 만들었습니다.

해당 두 개의 이미지에서 둘 다 업데이트 되는 부분만 다시 렌더링 되는 걸 볼 수 있습니다.

 

자바스크립트를 이용해 만든 시계

 

리액트를 이용해서 만든 시계

 

 

가상 DOM의 필요성

 

React 애플리케이션에서 상태를 변경하면

최신 업데이트가 포함된 전체 Virtual DOM의 새 버전이 생성됩니다.

그런 다음 React는 이전 Virtual DOM 트리와 업데이트된 Virtual DOM 트리를 비교해서

변경해야 할 요소를 찾습니다.

그런 다음 변경된 브라우저 DOM의 요소만 업데이트합니다.

React는 Diffing 알고리즘을 사용해서 2개의 가상 DOM 트리를 비교합니다.

DOM 과 Virtual DOM

 

React는 각 상태 변경에 대해 새 UI를 생성해줍니다.

Virtual DOM은 새 Virtual DOM 트리를 변경해도 브라우저 화면에 아무것도 그려지지 않기 때문에,

즉시 리플로우 및 다시 그리기가 발생하지 않습니다.

 

2개의 가상 DOM 트리를 사용하면 1개의 트리가 초안 역할을 하고

나중에 실제 DOM에 대한 일괄 업데이트를 수행하는 데 사용된다는 이점이 있습니다.

이전 Virtual DOM 트리는 Current Tree라고 하고,

다른 하나는 Work in Progress Tree라고 합니다.

 

Dan Abramov의 YouTube 동영상 에서

단은 2개의 가상 DOM 트리의 모티베이션이

초기 게임 개발에 사용되었던 더블 버퍼링 기술에서 유래했다고 설명한 적이 있습니다.

 

따라서 React는 먼저 Work in Progress Tree를 변경한 다음에, Real DOM에 대한 변경 사항도 업데이트합니다.

기본적으로 Vanilla JS를 사용하여 작성된 웹 사이트보다 추가 작업을 수행하는거죠.

하지만 복잡한 기능과 UI를 가진 사이트에서 성능면에서는 React가 더 나을 수 있습니다.

 

Virtual DOM 에 대해서 해당 자료들을 참고하면 더 좋을겁니다.

 

https://stackoverflow.com/questions/61245695/how-exactly-is-reacts-virtual-dom-faster/61272492?source=post_page-----cd33ceb0478e--------------------------------#61272492

How exactly is React's Virtual DOM faster?

 

https://svelte.dev/blog/virtual-dom-is-pure-overhead?source=post_page-----cd33ceb0478e--------------------------------

Virtual DOM is pure overhead

 

 

Vanilla JS 대신 React를 사용하는 이유는 선언적이며
재사용 가능한 구성 요소를 제공하고 복잡한 UI를 쉽게 구축하는 동시에
어려운 부분을 추상화하는 데 도움이 되기 때문입니다.

또한 Facebook, Netflix, Dropbox 등과 같은 최신 웹사이트는 매우 동적이므로
진행 중인 작업 트리를 사용한 다음에, 업데이트를 일괄 처리하는 것이 좋습니다.

 

그렇기 때문에 아래 예제와 같은 작업을 수행한 경우,

setState()가 업데이트를 비동기식으로 일괄 처리한다는 점을 눈치채셨을 것입니다.

this.setState()는 일괄 업데이트를 수행하는 걸 볼 수 있다.