[React] DOM과 Virtual DOM

DOM 이란 무엇인가?

DOM은 Document Object Model로 HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다.

 

DOM 조작의 비효율성

쉬운 예로 쇼핑몰 페이지에서 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하거나 어딘가에 글을 남기면 전체 노드들이 처음부터 다시 그려지게 된다. 이처럼 불필요한 DOM조작의 반복으로 소모적인 비용이 크게 증가하게 된다.

최근 SPA를 많이  사용하면서 DOM tree를 즉각적으로 변경할 일이 많아져 DOM조작을 더욱 효율적으로 할 수 있게 최적화가 필요해졌다.

 

Virtual DOM이란?

Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM이다.

변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.

즉 데이터가 변경이 되면 전체 UI는 가상돔에 렌더링 되어져 이전 가상돔에 있던 내용과 업데이트 후에 내용을 비교하여 바뀐 부분만 실제 돔에 적용시킨다.

 

Virtual DOM의 특징

자바스크립트 객체를 활용한다.

메모리상에서 동작하므로 훨씬 빠르게 동작한다.

실제 렌더링이 되지 않기 때문에 연산 비용이 적다.

 

Virtual DOM의 원리

리액트는 가상돔을 이용하여 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이 과정일 Diffing이라고 한다. diffing을 통해 변경된 부분을 파악한 후 batch update를 수행하여 실제 돔에 한번에 적용시켜 준다. 이 과정을 재조정이라고 한다.