React를 사용하면 장점으로 Virtual DOM이 있다.
Virtual DOM 이 무엇이고 어떤점이 장점인지 알아보자.
💡Virtual : 가상의
💡DOM : Document Object Model, 문서 객체 모델
DOM은 HTML의 모든 요소를 뜻하며
Javascript는 DOM을 이용해 HTML의 요소에 접근한다.
접근하여 이벤트를 만들고 이벤트가 발생하면
DOM 요소에 변경사항이 생기기 때문에 브라우저는 해당 변경 사항을
즉시 랜더링한다.
(변경 사항에는 요소를 추가, 삭제, 속성 변경이 있다)
DOM, 뭐가 문제지?
DOM 조작은 비교적 무겁다고 하는데 무거운 이유는 다음과 같다
브라우저가 DOM 트리를 탐색하고, 변경 사항을 반영하기 위해
Reflow와 Repaint를 처리하는 과정이 비교적 길기 때문이다.
💡Reflow(레이아웃 계산): DOM에서 요소의 위치나 크기와 관련된 스타일을 변경하면, 브라우저는 모든 요소의 레이아웃을 다시 계산한다.
이 과정이 Reflow이며 문서의 크기와 복잡성에 따라서 시간도 비용도 커진다.
💡Repaint(화면 다시 그리기): 요소의 색상, 글꼴 등 스타일이 변경되면 브라우저는 해당 요소를 다시 그려야 한다. Reflow 보다는 비용이 적지만, 자주 발생하면 역시 성능에 영향을 미칠 수 있다.
변경 사항을 바로 업데이트하지 않고 모았다가 한번에 수정한다면
위와 같은 처리 시간과 비용이 비약적으로 줄어들 것이다.
이런 방식을 자동으로 해주는 것이 Virtual DOM을 활용한 리액트라고 볼 수 있다.
Virtual DOM은 어떻게 랜더링 할까?
Virtual DOM 이란
실제 DOM을 카피한 가상 DOM이라 생각하면 된다.
변경사항이 생기면 실제 DOM을 수정하기 전에 가상 DOM에 먼저 반영해본다.
가상 DOM에 변경사항들이 모이면 한번에 실제 DOM으로 변경사항을 보내고
실제 DOM은 한번의 수정이 일어나게 된다.
리액트는 컴포넌트의 상태(state)나 속성(props)이 변경되기만 하면 가상돔에 변경사항을 효율적으로 계산하고, 이로 인해 불필요한 DOM 조작이 줄어들게 된다.
이런 이점으로 대규모 프로젝트에서는 가상돔을 쓰는 리액트가 효율적이라 볼 수 있다.
추가로 가상돔은 리액트에서 가장 널리 알려져 있지만 리액트 뿐만아니라 다른 프레임워크, 라이브러리에서도 가상돔이 쓰인다.
Ex) Vue.js , Snabbdom, Inferno, Mithril, Preact
