리액트 virtual DOM과 reflow

DOM Reflow

• DOM reflow는 DOM이 화면에 표시되는 구조가 바뀔 때, 또는 CSS 클래스가 바뀔 때 일어남
• 이는 DOM 트리가 배치되는 위치를 전체적으로 다시 계산해서 화면에 출력하는 것을 의미한다.
• DOM repaint는 각 엘리먼트의 위치가 변경되지 않는다고 전제하지만, DOM reflow는 각 엘리먼트의 위치가 변경되는 상황을 전제하므로 각 엘리먼트의 위치 계산도 다시 수행된다.
• 특정 엘리먼트의 위치가 변경되면 그에 영향을 받는 자식 엘리먼트들과 해당 엘리머튼 이후에 나타나는 엘리먼트들에 대해서 전체적으로 위치를 다시 계산해야 하므로 DOM repaint보다 자원 소모가 크다.

DOM reflow 시 자원 소모 최소화 방법

• 크기가 변경될 DOM의 자식 엘리먼트를 최소화하거나, 변경될 DOM을 웹페이지의 아래쪽에 배치하는 것

요기서 질문

• 리액트의 경우, <div id='root'></>에 하위 요소에 컴포넌트들을 추가하는 형태로 되어 있다.
• root div에 하위 모든 컴포넌트들이 달리는 셈인데, reflow 괜찮은가?
• virtual dom이 알아서 해결해주나?

Reference

• 책/속 깊은 자바스크립트
• http://blog.drakejin.me/React-VirtualDOM-And-Repaint-Reflow/
• https://it-eldorado.tistory.com/87