리액트 가상돔에 개념에 대해서 정리해보려고 했는데, 블로그마다 말이 다 달라서 개념이 더 혼동되었다. 그래서 내가 궁금했던 건, "가상돔과 실제 돔을 비교를 해서 실제 돔을 업데이트 한다는 것인지" / "이전 가상돔과 업데이트 된 가상돔을 비교해서 이에 대한 diff를 실제 돔에 업데이트를 한다는 것인지", 또 어떤 자료는 형태를 캡처해놓은 스냅샷을 통해 비교를 한다는 글도 있었는데..
어느 글을 보아도 명확하게 나오지 않아 주로 외국 문서를 기반으로 다시 찾아보았다.

우리나라 대부분의 문서는 잘못된 내용의 문서가 많은 거 같고, 뭔가 퍼블릭하게 보기에 유명한 사이트가 많은 것도 아니라 개념에 대해 더 혼동이 오기 쉬운 거 같다..(개발을 하기에 앞서 영어를 배워야하는 이유..)

나는 이 문서를 통해 개념을 다졌다. 이 외의 외국 문서에서는 다 동일하게 가상돔에 대해 설명하고 있었는데 이론적으로 이게 더 맞다는 생각이 들어 문서 번역을 통해 다시한번 가상돔에 대해 정리해보고자 한다.

리액트 공식 문서를 보면 이 가상돔에 대한 해석은 개개인이 다 다르게 해석하고 있다는 문구(추상적인 개념인듯하다)를 보았어서, 대략 어떤 식으로 동작하는지를 받아들이면 되는 개념인거같다.

Virtual DOM?

ReactJS의 Virtual DOM과 재조정

ReactJS는 빈번한 DOM 조작과 렌더링으로 인해 발생할 수 있는 성능 문제를 해결하기 위해 각별히 주의를 기울인다.
예를 들어, 가상돔이 아닌 매번 전체 돔을 업데이트 하고 조작한다면 어떻게 될까? 상위 컴포넌트가 변경되면 하위 컴포넌트 또한 업데이트 되는 성질을 가진 리액트는 아마 작은 업데이트를 하게되어도 처음부터 끝까지 모든 것을 업데이트 하게 될것이다.
이러한 점은 당연히 앱의 성능을 망치게 되는 요인 중 하나가 될 것이다.

ReactJS는 개발자가 필요로 하지 않는 한 원본 DOM을 직접 업데이트하지 않는다.
React는 모든 DOM 개체에 대해 해당하는 메모리 내 복사본이 생성된다. 이 복사본을 "가상 DOM(Virtual DOM)"이라고 한다.

가상 DOM 트리에서 각 요소는 노드로 표시되어진다. 요소의 상태가 변경될 때마다 새 가상 DOM 트리가 생성이 된다. React의 diffing 알고리즘은 현재 가상 DOM 트리를 이전 버전과 비교한다. (가상 DOM은 휴리스틱 기반 디핑 알고리즘을 사용하여 실제 DOM을 diff로 업데이트한다.)

아래 애니메이션 이미지는 가상 DOM이 원본 DOM의 복사본으로 생성되는 방법과 차이점 및 업데이트가 발생하는 방법을 설명한다.

비디오 출처) @tapasadhikary

• 첫째, React는 원래 DOM의 복사본을 만들고 이를 가상 DOM이라 일컫는다. 가상 DOM의 각 노드는 요소를 나타낸다.
  
• 그런 다음 요소의 상태 업데이트가 있으면 새 가상 DOM이 생성되어진다.
• 이후, diffing 알고리즘을 통해 이전 가상돔과 변화한, 업데이트 한 가상돔의 차이를 식별한다.
  -> 변경된 부분만을 체크한다. 또 리액트는 얕은 비교를 수행하기 때문에 아주 가볍게 계층 별로 하나씩 변경된 사항이 있는지 체크하는 개념이다.
• 마지막으로, React는 "batch 업데이트"를 실행하여 이러한 변경사항을 원본 DOM에 업데이트하여 동기화를 유지한다.

어떤 부분을 변경해야 하는지 결정하기 위해 트리를 다른 트리로 디프팅한 다음 이 트리로 원래 DOM을 업데이트하는 메커니즘을 재조정이라고 한다고한다.

[결론]

다시한번 정리하자면, 리액트는 렌더링 성능 향상을 위해 가상돔을 통해 변경된 부분만을 체크하여 실제 dom에 반영을 하는 원리(휴리스틱 기반 디핑 알고리즘과 재조정 과정이 어떻게 이루어지는지가 핵심 매커니즘)이다.
또 변경사항은 리액트의 특징 중 하나인 batch 처리(useState를 예시로 setState로 값을 변경했다고 해서 바로 값이 변경하는 것이 아닌 값을 모았다가 한번에 업데이트 시켜주는 동작방식)에 의해 업데이트를 수행하게 된다!

참고하면 좋을 문서 ) geeksforgeeks virtual dom