[react] Real Dom & Virtual DOM

DOM (document object model)

DOM이란 HTML 페이지(document) 내 요소(element)를 트리 구조로 표현한 것이다. DOM은 document.getElementBy..., document.querySelector, document.addEventListener 와 같은 API를 제공하여 HTML Element에 접근/수정 할 수 있게 하는데 이를 돔 조작이라한다.

DOM & Rendering

아래는 브라우저가 코드를 화면에 그려내는 과정이다.

*CSSOM ( Cascading Style Sheets Object Model ) : CSS에서 DOM과 같은 역할을 하는 기능

위와 같이 렌더링된 브라우저에 우리가 돔을 조작하면 브라우저는 화면에 이를 다시 그려내는데, 조작된 Element 뿐 아니라 그 하위 Element를 DOM에서 분리한 후 수정된 Element들을 붙여넣고, 이후 Repaint 또는 Reflow 작업을 하게 된다.

• Repaint 재결합된 RenderTree를 기반으로 다시 Painting 하는 것을 말한다. 이 때는 Layout 계산이 일어나지 않는다. 주로 Element의 색상이 바뀌는 정도의 수정에서 Repaint 만 발생한다.
• ⭐ Reflow 문서의 전체 또는 일부의 레이아웃 계산부터 다시 Rendering하는 것을 말한다. Painting 과정을 포함한다. 주로 Element의 레이아웃이 바뀔 때 발생하며 잦은 Reflow는 페이지의 성능을 저하시킬 수 있어 프론트 엔드 개발자의 주의가 필요하다.

최근의 웹사이트는 인터랙션 디자인이 많다. 때문에 돔 조작 시 매번 많은 노드들에 Repaint 또는 Reflow가 발생하는 렌더링 방식은 비효율 적이다. 이를 효율적으로 운영하기 위해 React는 Virtual DOM을 지원한다.

Virtual DOM

Virtual DOM은 Real DOM과 동일한 요소, 동일한 구성의 Javascript 객체이다. 단순한 객체이므로 Virtual DOM이 변경될 때 Re-rendering이 발생하지 않고, 당연히 리소스가 크게 필요하지도 않다. 이를 이용하여 아래와 같이 Real DOM의 캐시역할을 한다.

• Virtual DOM 작동 방식

  1. Diffing : State가 변경되면 렌더링 전/후의 virtual DOM 을 비교하여 변경된 Element를 추출한다.

  2. Reconciliation(재조정) : 변경된 요소만 Real Dom에 적용시킨다. 이 때 Real DOM에 Batch Update 방식으로 적용시켜주는데, 이는 여러 요소들을 한번에 Real DOM에 적용시켜 렌더링을 최소화하는 방식이다.

• React에서 Re-rendering이 발생하는 조건

  • state가 update될 때
  • props가 update될 때
  • 부모 component가 Re-rendering 될 때
  • shouldComponentUpdate method에서 true가 반환될 때
  • forceUpdate method가 실행될 때

참조

• https://blog.naver.com/azanghs/222821185313
• https://www.youtube.com/watch?v=gc-kXt0tjTM