리액트의 재선언, Virtual DOM 동작원리, Diffing 알고리즘

리액트가 빠른 반응형 웹이 될 수 있었던 이유는 Virtual DOM 덕분이다.

Virtual DOM이 변화한 부분만 캐치하여 최소한의 변경사항만 Raal DOM에 업데이트 해주기 때문이다.

 

이는 맞는 말 이지만...
너무 겉햛기식으로만 Virtual DOM을 이해하고 있기에 이번에 더 깊게 Virtual DOM을 공부해보았다.

 

Virtual DOM 관련하여 테코톡에 세 개의 영상이 올라와 있었고
세 영상으로 더 깊게 알게된 Virtual DOM에 대해 정리해보려고 한다!

(테코톡 최고..)

---

Virtual DOM 등장이유

• 과거에 비해 현대의 웹 페이지는 UI/UX가 굉장히 매력적이고 복잡하다.
• 이러한 웹 페이지의 브라우저 렌더링 과정에서의 문제는
  DOM에 변화가 발생할 때마다 렌더트리가 재생성되고 모든 요소들의 스타일을 다시 계산하고 Reflow, Rapaint 과정을 반복하게 된다는 것이다.
• 브라우저 렌더링 과정은 생각보다 복잡하고 비용이 큰 작업인데.. 이는 정말 비효율적인 방식이었다.
• 그래서 DOM 업데이트를 어떻게 더 효율적으로 할 수 있을까?라는 고민에서 Virtual DOM이 등장했다.

Virtual DOM 이란?

• 오른쪽의 이미지가 바로 Virtual DOM 이다.
• Virtual DOM은 DOM 트리를 복제하여 메모리에 저장시킨 자바스크립트 객체이다.
• DOM 정보인 tagName, attributes, 자식들에 대한 정보는 가지고 있지만
  DOM 조작 메서드인 innerHTML, replaceChildren 같은 거는 없다.
• 즉, Real DOM을 경량화 시킨 것이다.
• 자바스크립트 객체이기에 브라우저에서 직접 수정되지 않는다.
• 메모리 상에서 변경사항을 계산하고 Virtual DOM을 통해 변경된 것들만 식별하여 DOM 업데이트를 한 번 시킨다.
• 즉, Reflow를 한번 시켜서 연산비용을 줄여 성능이 개선된다.

Virtual DOM 동작과정 = 재조정

1. JSX를 Babel을 이용하여 JS코드로 변환하면 React.createElement 함수를 호출하게 된다.
   호출되어 결과적으로 자바스크립트 객체가 나오는데 이 자바스크립트 객체가 Virtual DOM이다.
2. 이렇게 생성된 Virtual DOM을 ReactDOM 라이브러리의 render 메서드를 통해 실제 DOM에 반영한다.
3. 변경이 되면 React가 컴포넌트의 변화를 감지하고 상태가 변경된 컴포넌트의 Virtual DOM을 업데이트 시킨다.
4. 이후 업데이트 전과 후의 Virtual DOM을 비교하는 과정을 거치게 된다.
5. 업데이트 후와 전의 Virtual DOM을 비교하는 과정은 Diffing 알고리즘을 통해 거친다.
6. Diffing 알고리즘은 type부터 확인을 한다.
   1. type이 같다면, 두 Virtual DOM의 엘리먼트 속성을 확인하여 동일한 내역은 유지하고 변경된 속성들만 갱신한다. 이어서 해당 노드의 자식들도 처리힌다.
   2. type이 다르다면, 이전 Virtual DOM을 버리고 완전히 새로운 Virtual DOM을 생성한다.
7. 이러한 과정을 통해 변경된 내용만 Virtual DOM에 반영하여
   그 Virtual DOM을 다시 ReactDOM 라이브러리를 이용해 render 메서드를 통해서 변경된 것이 보이게 된다.

 

---

- 참고영상

1. 테코톡 엽토님

https://youtu.be/Bdk7QzbbcEI?si=MMAOzqMYAmSHpeih

2. 테코톡 지그님

https://youtu.be/PN_WmsgbQCo?si=LPOcRBJCEc_bSNyt

3. 테코톡 돔하디님

https://youtu.be/6rDBqVHSbgM?si=t_S-xZmPdg317IWQ