Virtual DOM

• React는 랜더링시 Virtual DOM과 Real DOM을 비교하여 바뀐부분을 비교후 적용한다.
• Real DOM과 달리 실제 브라우저 화면에 그리는게 아니므로 연산 속도가 빠르다.
• 자바스크립트의 객체 형태로 트리를 구성한다.

등장배경

DOM의 조작과 속도

• DOM은 트리 구조로 되어있고 트리는 저장된 데이터를 효과적으로 탐색하기 위해 설계 되었다.
• DOM은 트리 구조이기 때문에 특정 요소가 업데이트가 되면 해당 node에 있는 자식요소들을 포함하여 DOM트리를 재구축 하게되고, 재랜더링과정을 거쳐 UI를 업데이트를 한다.
• 즉 DOM의 변경 및 업데이트는 브라우저 또한 화면을 Reflow한다는 것을 의미한다.
• 브라우저와 reflow,repaint는 해당 과정을 거쳐야하므로 그만큼 브라우저의 속도가 느려지게 된다. 또한 JS로 조작하는 DOM의 요소가 많아질수록 해당 과정에 대한 비용이 많이들고 중복으로 일어날수도 있다.
• 이러한 문제 때문에 바뀐 부분만 최종적으로 렌더링을 하고자 만들어 졌다.

대략적인 진행과정

• DOM에 변화가 생기면 관련된 css를 다시 계산해서 레이아웃을 만들고 리랜더링된다. 여러개의 DOM조작을 가상DOM에서 변경시키고 최종적으로 실제DOM에 주는 방식.

• Real DOM을 직접 조작했다면 한개의 DOM을 조작할때마다 관련된 부분을 리랜더링를 해야했고 만약 여러번의 조작이 있다면 그만큼 리랜더링이 발생하지만 가상 DOM을 사용하면 한번만 리랜더링 되므로 유리하다.

React Diffing Algorithm

• 이전의 가상돔에서 달라진 점을 추적할 때 전체 돔을 전부 탐색한다면 O(n^3)의 시간복잡도가 걸린다. 그러나 React는 개발자가 부여한 key를 이용하여 더 나은 시간 복잡도를 가지는 알고리즘을 사용하고 있다.
• 엘리먼트 자체가 바뀐다면 새로 랜더링을 한다.
  • 부모태그가 변하면 새로 랜더링을 하기 때문에 자식 컴포넌트들은 완전히 해체되고 (state 포함) 업데이트 된다.

번외 useLayoutEffect

• useEffect와 useLayoutEffect는 비슷한 형태이지만 가상돔의 랜더링 과정을 봤을때 페인트되기전 발생할수 있는이펙트라는 점에서 다르다.
  -use Effect는 완전히 랜더링(페인팅까지 진행후)되고나서 실행되는 반면 useLayoutEffect는 paint되기전 돔을 형성한뒤 실행된다.
• 이 훅을 사용하면 상황에 따라 더 나은 UX를 제공 할 수 있다.