[React] 가상 DOM

 

가상 DOM

 

---

 

# 가상 DOM의 등장 이유

 

 React 가장 큰 특징은 가상 DOM을 사용한다는 것이다. 가상 DOM을 사용하는 이유를 알기 위하여 우선 브라우저 렌더링 과정을 이해해야 한다. 브라우저는 서버에게 렌더링에 필요한 리소스를 받고, 이를 이용하여 DOM을 생성한다. DOM은 렌더 트리를 구성하고, 이 렌더 트리를 기반으로 HTML 요소가 페인팅된다. 즉, DOM 트리 생성, 렌더 트리 생성, 레이아웃 계산(리플로우), 화면에 그리기(페인트) 과정을 거쳐 화면이 완성되는 것이다.

 

자세한 내용 : 브라우저 렌더링과 DOM https://inthedev.tistory.com/16

 

 그러나 웹 페이지는 사용자와 상호작용한다. 따라서, DOM은 자주 변화한다. DOM의 변화 하나하나마다 계속해서 페이지를 렌더링한다면 어떨까? 좋아요 버튼 하나를 눌렀는데 페이지가 새로고침 되거나, 글자 하나만 입력해도 페이지가 새로고침 된다면 매우 불편할 것이다. 이런 문제를 해결하기 위해 등장한 것이 가상 DOM이다.

 

 

# 가상 DOM이란

 

 가상 DOM이란 말 그대로 가상의 DOM이다. DOM의 형태를 하고 있는 자바스크립트 객체로, 메모리에서 동작하여 실제로는 렌더되지 않는다. DOM 속의 모든 객체는 그에 해당하는 가상 DOM 객체가 있어서,이를 서로 비교하는 것이다. 대략적인 과정은 다음과 같다.

 

 1. JSX를 렌더링하면 가상 DOM이 업데이트 된다.

 2. 가상 DOM은 이전의 가상 DOM과 비교하여 바뀐 부분을 찾는다. (diffing)

 3. 바뀐 부분만 실제 DOM에서 바꿔준다.

 

 즉, 웹 페이지에 변화가 생기면 해당 UI를 가상 DOM에 렌더링하고, 이를 이전의 가상 DOM과 비교하여 바뀐 부분만 실제 DOM에 적용시키는 것이다. 바뀐 부분을 찾는 과정을 diffing이라고 부른다. diffing 과정에서 어떤 요소의 속성 값만 변한 경우에는 속성 값만 업데이트하고, 요소 자체가 바뀌거나 컴포넌트가 바뀐 경우에는 해당 노드를 포함한 하위 노드를 새로운 가상 DOM으로 바꾼다.

 

diffing, 요소 혹은 컴포넌트가 바뀌면 하위 노드도 바뀐다

 

SPA로 제작된 웹 페이지에서는 브라우저가 많은 연산을 하기 때문에 가상 DOM이 유용하게 사용된다.

 

---

 

참고 자료

https://youtu.be/PN_WmsgbQCo