최근에 면접을 다니면서 받은 질문 중에 대답하지 못하거나 기본적인데 알지 못했던 것들에 대해 많이 공부 중이다. 그 중에 Virtual DOM 개념에 대해 react를 처음 공부했을 때 들어보기만하고 공부하지 않았는데 이에 대해 정리하고자 한다.
1. Virtual DOM?
Virtual DOM은 실제 DOM을 추상화한 복사본이다. 공식적인 정의가 아닌 개인적으로 내린 정의이다. 이를 이해하기 위해서는 DOM에 대해 알아야한다.
DOM(Document Object Model)은 문서 객체 모델이라고 하고 순수 Text로 구성되어 있는 HTML파일을 파싱하여 문서의 구성요소들을 객체로 구조화한 것이다. 그렇다면 Virtual DOM이 왜 등장하였고 어떤 문제를 해결하기 위한 것인지 알아보자.
2. 브라우저 렌더링 과정
DOM을 직접적으로 조작하게 되면 계속해서 렌더링을 하게 되고, 그 만큼 PC의 메모리를 많이 사용하게 될 것이다. Virtual DOM이 이 문제를 해결하기 위해 등장한 기술이다.
브라우저가 렌더링을 하는 과정은 아래와 같다. 자세한 정리는 여기로
- HTML, CSS를 파싱하여 DOM, CSSOM객체를 생성한다.
- DOM, CSSOM을 합쳐 Render Tree를 만든다.
- Render Tree를 기준으로 Layout, Paint 작업을 한다.
이 과정에서 변경해야 할 요소가 10개가 있다면 10번을 렌더링을 해야하는 문제가 있다. 정확하게 10개의 변화가 있다고 10번을 렌더링 하는 것은 아니지만 비효율적이라는 뜻이다.
3. 동작 원리
DOM을 직접적으로 조작하면서 변화가 생기면 계속해서 리렌더링되어 PC의 메모리 성능을 저하할 수 있는 문제를 해결하기 위해 Virtual DOM이 등장했다고 했다.
그렇다면 어떻게 해서 효율적으로 렌더링을 하게 해주는지 동작 원리를 알아보자.
Virtual DOM은 DOM을 추상화한 가상의 객체인데 이를 메모리에 만든다. Virtual DOM이 중간에서 변경 사항을 한 번에 모아서 이를 DOM과 비교하고(비교 알고리즘), 차이를 판단한 후에 변경된 부분만 변경을 한 후 1번의 렌더링이 일어난다.
예를 들어, 사용자의 이벤트에 의해 기존의<li>태그가 10개가 페이지네이션된다고 생각하자. 그러면 10번의 렌더링이 일어나는 것이 아니라 Virtual DOM에서 10개의 <li>가 변경이 되고, 이를 DOM과 비교한 후에 1번만 렌더링이 된다.
4. 오해하지 말자!
Virtual DOM도 메모리에서 10번 렌더링 발생하지 않아요?
- Virtual DOM은 가상의 객체 이므로 이 것 자체가 바뀔 때 실제로 렌더링되지 않고 연산만 하고 끝나면 실제 DOM 던져줄 뿐이다. 가상 환경에서 10번의 리렌더링이 일어나는 것은 아니다.
DOM 직접 제어보다 Virtual DOM을 무조건 사용해야 좋네요?
- React를 통해 Virtual DOM을 이용하는 것이 DOM을 직접 제어하는 것보다 '무조건 빠르지 않고', '충분히 빠르다'다는 것이다. 리액트를 사용하면 자동으로 최적화 작업을 어느 정도 해주지만 제대로 이루어지지 않으면 오히려 낮은 퍼포먼스를 나타낼 수 도 있다. 어떤 경우에는 최적화 작업을 손수 했을 경우가 React를 사용하는 경우보다 빠를 수 있다.
예를 들어, 무한 스크롤을 구현하는데 진작 렌더링 된 화면은 리렌더링 되지 않게 설정해야한다. 안그러면 계속해서 처음부터 모든 데이터를 다시 그리기 때문이다.
