[React] Virtual DOM
React - 3
[본 글은 '리액트를 다루는 기술' 의 책을 참고로 정리한 공부 내용입니다.]
이번에는 리액트의 가장 큰 특징인 Virtual DOM에 대해 알아보려 한다.
그 전에 우선 DOM에 대한 개념을 알아두어야 할 필요가 있다.
DOM이란?
Document Object Model
객체로 문서 구조를 표현하는 방법 (ex. XML, HTML)
트리 형태로 특정 노드 조회, 수정, 제거, 생성 등이 가능하다.
정적이다.
JavaScript를 이용하여 동적으로 만들 수 있다.
DOM 자체는 빠르지만, 요소의 개수가 수 백 개, 수 천 개로 늘어날 경우
허비되는 시간이 많아져 결국 느려진다.
결정적인 이유는 그 과정에서 DOM은 변화가 일어날 때
1. CSS의 재연산
2. 레이아웃 구성
3. 페이지 리페인트
의 과정을 거치며 잦은 업데이트가 일어날 경우 성능 저하가 필연적으로 일어날 수 밖에 없다.
Virtual DOM
속도 이슈에 대한 해결책은 결국 DOM을 최소한으로 조작하는 수 밖에 없다.
리액트에서는 이러한 문제점을 해결하기 위해 Virtual DOM 방식을 사용해 DOM의 업데이트를 추상화하여 처리 횟수를 최소한으로 한다.
Virtual DOM은 실제 DOM을 조작하는 게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다. 쉽게 말하여 실제 DOM의 사본 정도의 개념이다.
(* 이전 게시물의 render 함수가 Virtual DOM 객체를 반환하는 역할을 한다.)
이런 식으로 생성된 사본을 이용해 업데이트 할 때
1. 업데이트한 전체 UI를 Virtual DOM에 리렌더링
2. 실제 DOM과 생성된 Virtual DOM을 비교
3. 바뀐 부분만 실제 DOM에 적용
그렇다면 Virtual DOM은 정말로 빠를까?
결론만 말하자면 아니오. 라 답할 수 있다.
리액트 매뉴얼에는 다음의 문장이 있다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기.
즉, 간단한 작업(예 : 단순 라우팅 작업만 있을 경우)일 경우에는 리액트를 사용하지 않는 편이 더 효과적인 때가 있다는 소리이다. 또한 코드 최적화를 열심히 한다면 속도 문제를 개선할 수 있다.
리액트가 보장하는 성능은 바로 업데이트 처리 간결성이다. 무조건적으로 리액트를 사용하는 것이 아닌 때때로 유연하게 개발을 할 줄 알아야 한다.
이렇게 Virtual DOM에 대하여 알아보았다.
다음 게시물부터는 드디어 작업 환경 설정에 들어가보겠다.
