리액트의 주요 특징 중 하나는 Virual DOM을 사용하는 것입니다.
DOM
DOM(Document Object Model)이란, 브라우저가 문서 구조를 자신들이 이해할 수 있는 Object(Node)로 변환한 것입니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.
브라우저는 HTML 코드를 위에서 부터 한줄 한줄 읽으면서 HTML DOM 트리를 만듭니다.
다음은 어떤 HTML의 DOM 트리 입니다. HTML의 태그들은 각 노드에 매핑됩니다.
DOM의 문제점
DOM은 치명적인 한가지 문제점이 있습니다. 바로 동적 UI에 최적화되어 있지 않다는 점입니다. HTML은 자체적으로 정적인데 자바스크립트를 사용하여 동적으로 만듭니다.
그러나 규모가 큰 웹 애플리케이션은 화면에서 수많은 데이터를 다룹니다. 이를 동적으로 다루기 위해 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 발생하기 시작합니다. 웹 브라우저 단에서 DOM의 변화가 일어나면 브라우저에서 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트합니다. 이때 페이지의 속도가 느려지게 됩니다.
리액트는 이를 해결하기 위해서 DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 가상 DOM을 사용합니다.
가상 DOM
가상 DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 즉, 실제 DOM의 사본을 만드는 것과 같습니다.
리액트에서 데이터의 변화로 브라우저에서 실제 DOM을 업데이트해야 할 때는 다음 세가지 절차를 따릅니다.
- 업데이트 될 전체 UI를 가상 DOM에 리렌더링 한다.
- 이전 DOM 트리와 가상 DOM 트리의 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
가상 DOM을 사용한다고 무조건 빨라지는 것은 아닙니다. 그러나 UI를 업데이트하는 과정에서 생기는 복잡성을 해소하고 더욱 쉽게 업데이트에 접근할 수 있습니다.
