React.js - 리액트의 특징, 버추얼 돔(Virtual DOM) 이란?

---

리액트에서 가상 돔이란?

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 리액트는 특징이 많은 라이브러리입니다. 그중에서도 가장 큰 특징을 하나 꼽으라고 하면 다름 아닌 가상 돔(Virtual dom)입니다. 하지만 제 블로그에서는 "버추얼 돔"이라는 명칭으로 지칭하겠습니다. 리액트가 더 빠른 사용자의 편의성을 위해 어떤 노력을 하는지 알아보겠습니다. 

 

 

---

통째로 바꾸어 버리자!

---

 

● 2. 리액트를 만든 페이스북 개발자들은 기존의 브라우저의 변화가 일어날 때 복잡한 이벤트 발생을 발생시키는 기존의 방식이 아닌 통째로 뷰(view)를 날려버리고 새로운 뷰를 만들자는 상상을 하였습니다

 

 

● 3. 조금 애매한 개념입니다. 그럼 예시로 한번 설명해보겠습니다. 예전에 개그콘서트 촬영 현장을 다녀온 기억이 납니다. 약 20개의 코너가 존재하고 매번 다른 출연진이 나와 연기를 합니다. 이때 무대도 함께 바뀝니다. 그런데 기존의 무대를 통째로 이동해서 다른 통로로 빼고 새로운 무대를 통채로 가지고 들어와 순식간에 셋팅을 합니다. 이렇게 하면 손이 많이 가지 않아도 순식간에 코너마다. 무대 셋팅을 하게 됩니다. 이러한 방식을 사용하는게 리액트의 가상 돔입니다. 가상의 돔은 한개의 무대입니다. 사용자가 새로운 걸 보고 싶어한다면 통채로 다른 뷰를 가져와 세팅합니다. 

 

---

변화가 적다면 바뀐 부분만 수정한다

---

 

 

● 4. 하지만 매번 이렇게 화끈하게 무대를 바꾸는 건 아닙니다. 개그콘서트에도 비슷한 무대를 사용하는 코너가 있습니다. 이때는 이전 개그 코너에서 사용한 무대를 그대로 두고 몇 개의 소품만 변경을 합니다. 무대를 가정집에서 병원으로 변경할 시에는 꽃병 몇 개와 병원 침대를 가지고 와서 무대를 업데이트합니다. 그렇게 하면 최소한의 수정으로 새로운 뷰를 만들게 됩니다. 이러한 업데이트 방식도 가상 돔이 하는 방식입니다. 비교를 한 다음 바뀐 부분이 있다면 그곳만 손을 대는 방식입니다.

 

---

이러한 방식이 좋은 이유?

---

 

 

 

● 5. DOM은 기본적으로 아주 정적인 UI입니다. 이러한 구조를 개발자들은 자바스크립트를 사용해 동적으로 변경하는 일을 해왔습니다. 하지만 이러한 수정은 결국 브라우저에게는 부담이 가는 이벤트였습니다. 모든 걸 다시 계산하게 됩니다. 다시 그려지는 웹페이지는 결국 많은 부하와 시간적 손해가 일어나게 됩니다. 특히 페이스북은 스크롤을 내리면 끊임없이 새로운 콘텐츠를 불러와야 하는 방식입니다. 그럴 때마다 계속되는 브라우저가 해야 할 일들은 많아지고 결국 점점 느려지게 됩니다.

 

● 6. 그래서 이러한 단점을 없애기 위해 버츄얼 돔을 사용하는 것입니다. 최소한의 수정으로 최대한의 성능을 만들어 내는 방식입니다. 무대 뒤에서 다음에 선보일 코너를 준비하기 위해 열심히 먼저 준비한 다음 새로운 내용이면 다 바꿔버리고 기존의 걸 수정만 한다면 차이점을 인지하고 업데이트하는 방식으로 최적의 웹서핑 환경을 만들어주는 라이브러리입니다.

 

---

마무리

---

 

수 십억 명이 사용해도 쾌적한 이유가 다 있습니다.