💬 오늘의 주제
안녕하세요! 오늘은 가상DOM에 대해 알아보겠습니다.
react를 다뤄보신 분들이라면 가상 DOM이라는 말은 많이들 들어보셨을텐데요.
여기서 DOM은 Document Object Model의 약자로 HTML 파싱을 통해 생성되는 친구입니다.
예전에 주소창에 주소를 입력하면이라는 제목으로 우리 눈에 웹사이트가 보여지기까지의 과정을 정리해 놓은적이 있는데요, 이 글에 나와있는 것처럼 브라우저가 웹사이트를 구성할 때 앞에서 이야기했던 DOM과 CSSOM을 합쳐 렌더트리를 생성하고 이를 기반으로 렌더링 작업이 이뤄집니다.
요즘 같이 동적 작업이 많은 어플리케이션에서 DOM을 직접 조작한다면 어떤 일이 생길까요? DOM을 생성하는 과정부터 화면에 페인트하는 과정까지가 빈번하게 발생하게 되고 있는 성능에 문제를 일으킬 수 있을 것입니다.
이를 해결하기 위해 react에서는 가상DOM을 활용하고 있는데요. 가상 DOM이란 DOM의 복사본으로 객체형태로 메모리에 저장되어 있습니다. react에서 재렌더링이 발생하면 곧바로 DOM을 수정하는게 아닌 하나의 가상DOM을 생성하고 기존에 메모리에 저장되어 있던, 즉 재렌더링이 발생하기 이전의 가상DOM과 비교하여 변경이 있었던 부분만을 실제 DOM에 반영하고 있습니다.
또한, 이 과정에서 열개의 변화가 있을 때, 하나하나의 차이점이 발견될 때마다 DOM에 적용시키는게 아닌 전체 비교가 끝난 후 열개의 변화를 한번에 적용시키는 방식으로 성능 향상에 도움을 주고 있습니다.
💛 Reference
횡설수설 정리노트