React와 virtual DOM(가상 돔)에 대하여

virtual DOM

• React.js는 DOM 객체 기반의 브라우저가 유저와의 잦은 인터랙션을 최적화하기 위한 라이브러리입니다.
• 유저의 인터랙션에 따라 상태가 변화할 경우, DOM 요소들이 업데이트 되는데, 일부분이 바뀜에도 전체 DOM을 업데이트 하는 것은 브라우저의 연산에 많은 부담을 줍니다.
• 리액트의 virtual DOM은 상태 변화로 뷰 포트를 업데이트 하기 전에 virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있습니다.
• Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 줍니다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 것입니다.
  • 예를 들어 DOM에서 30개의 노드가 수정되면, 30개의 레이아웃이 재계산과 30번의 리랜더링이 발생합니다.
  • virtual DOM에서는 30개의 노드의 변화에 대해 30번의 연산 결과를 DOM에 건내줍니다. DOM은 건내받은 변화사항을 한 번만 렌더링하면 되는 것입니다.
• Virtual DOM 이 해결 하려고 하는건 무엇이냐? 그 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화하는 것입니다.
• 물론 Virtual DOM이 React.js만이 가진 유일한 특성은 아닙니다. 또한 이 작업은 vanilla JS로도 구현이 가능합니다. 그러나 DOM 요소의 변화를 개발자가 직접 관리하는 것은 적지 않은 짐으로 다가오게 될 것입니다.
• React 프레임워크를 사용함으로써 데이터의 흐름을 강제하여 일관된 구조로 구현 할 수 있다는 장점이 있습니다.