[리액트 분석하기] 리액트의 가상 Dom은 Native Dom과 비교해서 왜 빠른지에 대해서 알아보자.

사실 이 글의 제목은 리액트의 가상 돔이 아니라 모든 가상 돔은 왜 빠른지. 라고 해야 맞는 표현이다.

 

가상 Dom(Virtural Dom) 은 리액트만 사용하고 있는 개념이 아니라 다른 프레임워크도 사용하고 있는 개념이기 때문이다.

 

우리가 가상 dom을 이용해서 리액트는 처리를 한다고 알고 있는데, 도대체 왜, 어떻게, 무엇이 다른지 한 번 알아보자.

Dom

우리가 가상 돔을 알기 위해서는 먼저 Dom에 대해 알아야 한다.

 

MDN에서 Dom은 다음과 같이 정의하고 있다.

핵심은 우리가 Javascript에서 HTML에 접근할 수 있게 하는 역할이라는 것이다.

그럼 DOM의 생김새는?

HTML의 구조를 문서화 해놓은 것. 쯤으로 생각해보면 돔의 모양은 아마 다음과 같을 것이다.

딱 보면 뭐가 떠오르지 않나? 폴더 디렉토리 구조?

 

맞다.

 

폴더 디렉토리 구조처럼 생겼는데, 이 폴더 디렉토리 구조라는 것은 실은 트리 구조를 갖고 있는 것이다.

 

하나의 루트 노드가 있을 때, 여러 자식 노드와 그 자식 노드로 이루어진 구조.

 

트리 구조에 대해서 자세히 알고싶다면, 트리 자료구조에 방문해보자.

어떻게 접근하는데?

위에서 우리는 DOM은 HTML에 JS가 접근하는 방법이라고 했는데, 사실 여러분은 이미 알고 있거나 모르지만 많이 써봤던 사람도 있을 수도 있다.

 

DOM이란 다음과 같은 것들이다.

이렇게 JS에서 HTML에 접근하려는 여러 API들을 일컫는다.

---

Virtual DOM

그럼 이제 실제 DOM에 대해서 알아보았으니 React의 가상 DOM이 무엇이고 왜 빠른지에 대해 알아보자.

 

가상 돔이란?

가상 돔은 실제 돔과 사용자 사이에서 존재하며 사용자가 실제 돔을 더욱 손쉽게 사용할 수 있게 한다.

 

그럼 왜 가상 돔이 더 빠를까?

사실 리액트의 핵심은 복잡한 작업을 단순화 하고 불필요한 추상화를 제거하자라는 메인 컨셉을 갖고 있는 라이브러리이다.

우리가 만약 실제 DOM 객체에 접근하려고 한다면 위에서 봤던 트리 구조를 모두 순회해야 한다.

가상 돔(Virtual DOM)은 리액트의 핵심에 정확히 부합하는 기능을 수행한다.

 

우리가 DOM 요소에 접근하려면 모든 트리 구조를 순회해야하고 여러 번의 수정이 있으면 여러 번의 트리를 순회하는 그런 일이 발생한다.

 

그럼 개발자입장에서는 그런 불필요한 오버헤드를 줄이기 위한 코드를 짜야할 것이고, 이게 바로 순수 JS가 어렵다고 평가받는 이유 중 하나가 아닐까 생각한다.

 

이런 것들을 가상 돔이 최적으로 수행해주기 때문에 가상 돔이 더 빠르다는 것이다.

 

 

 

하지만 명심해야할 것이 있다.

 

 

React in Action의 저서 Mark Tirense Tomas는 이렇게 말한다.

이러한 가상 dom의 장점은 단지 빠르게 하기 위함이지 모든 성능 ISSUE를 해결하려는 만병 통치약으로 보아선 안된다.