[Javascript] React의 Virtual Dom

 

DOM(Document Object Model 문서 객체 모델)

HTML 또는 XML 문서에 접근하기 위한 인터페이스로, HTML element들을 Tree 형태로 표현한 것이다.

우리의 IDE에서 작성한 HTML이 아닌, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 Node Tree가 DOM이다. DOM tree안에는 각 element에 상응하는 Node가 들어있고, 이러한 DOM은 API(getElementById, querySelector 등)를 제공하여 Javascript로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능하게 한다.

 

IDE에 HTML을 작성해도 최종적으로 결과 화면을 보기 위해서는 브라우저가 필요하다. IDE에 작성된 HTML은 단순한 문자열일 뿐이며, 브라우저가 이해하기 위해서는 Node(객체)로 변환해야 한다.

즉 DOM은 HTML과 Javascript를 이어주는 공간으로, 내가 작성한 HTML을 Javascript가 이해할 수 있도록 객체(object)로 변환하는 것이다.

 

 

Virtual Dom이란?

Virtual dom 은 실제 dom과 같은 내용을 담고 있는 복사본으로, dom과 내용을 공유한다. 그러나 실제 DOM과 달리 직접적으로 브라우저 화면의 UI를 조작할 수 있는 API(getElementById, querySelector 등)는 제공하지 않는다.

 

React는 렌더링 이전의 화면 구조를 나타내는 가상 돔과 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상 돔을 가지고 있다. 두 가상 돔을 비교하여 어떤 element가 변했는지 알아내는 과정을 Diffing 이라고 하고, 차이가 발생한 부분만을 실제 dom에 적용한다. 이 과정은 Reconciliation(재조정)이라고 한다.

이러한 Diffing과 Reconciliation 과정이 효율적인 이유는 batch update 방식을 사용하여 변경된 모든 element들을 집단화 시켜 실제 dom에 한 번에 적용하기 때문이다. 10개의 element가 변경된 경우, 10개의 element를 별개로 그리지 않고, 변경 내용을 한 번에 받아와 실제 dom에 한 번에 적용시켜준다는 점이 효율적이라는 것이다.

 

 

Virtual DOM을 사용하는 이유

- Virtual DOM을 조작 → DOM을 조작

- DOM을 조작

 

Virtual DOM의 작동 원리는 하나의 레이어를 더 거쳐가는 동작이기 때문에, DOM 조작이 아주 많지 않다면 DOM을 직접 조작하는 것보다 느리다. 실제로도 dom을 조작하는 일이 극단적으로 많지는 않기 때문에 virtual dom을 이용할 필요가 많지 않았다.

React가 나오기 전까진 말이다.

 

 

React의 등장(https://velog.io/@woohm402/virtual-dom-and-react)

 

Facebook 에는 페이스북 메시지가 오지 않았는데 메시지가 와 있다고 뜨는 심각한 버그가 있었고, 그들은 그 버그를 해결하지 못했다.

데이터 흐름을 파악하고 버그를 체크하는 데에 어려움을 겪던 이들은 아예 새로운 발상을 하게 된다.

 

"그냥 데이터가 바뀌면 싹 다 다시 그려 버리면 안돼?"

 

DOM에 변경사항을 직접 조작해서 집어넣지 말고 그냥 데이터가 바뀔 때마다 전부 다시 그려 버리면 버그가 생길 일이 없지 않냐는 질문이었다. 이를 통해 모든 변경사항을 Virtual DOM 에 새로 그리고, 기존에 비해 변경된 부분만 DOM에 한 번에 보내는 방법을 선택한다.

 

 

 

 

참고

https://www.howdy-mj.me/dom/what-is-dom

https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb

https://velog.io/@woohm402/virtual-dom-and-react