돔(DOM) 과 가상돔(Virtual DOM)

프론트 엔드 공부를 시작하면 가장 많이 마주하게 되는 게 DOM 이라고 생각한다.

특히, 리액트 와 같은 라이브러리를 사용할 때,

가장 큰 차이점은 Virtual DOM 을 사용한다는 것이다. 

이번 글에서는 DOM 과 가상 DOM의 차이점, 그리고 실제 개발에서 이를 어떻게 활용하면 좋을지 살펴보겠다.

DOM (Document Object Model) 이란?

DOM 은 HTML 문서를 브라우저가 해석하여 생성하는 트리 구조의 객체 모델이다. 

즉 웹페이지의 요소들을 JavaScript를 통해 조작할 수 있도록 해주는 역할을 해준다. 

그러나 본래의 DOM 은 몇가지의 단점이 존재한다. 

DOM의 경우 변경이 많아질수록 브라우저의 렌더링 성능이 떨어진다.

이는 비효율적인 업데이트를 하기 떄문인데, 

요소 하나를 변경할 때마다 전체 레이아웃이 다시 계산되기 때문에 성능이 현저히 떨어진다. 

특히 이러한 단점들이 큰 규모의 프로그램을 개발하게 된다면 그만큼 업데이트가 잦아지기 때문에

효율적이지 못하게 된다.

 

바로 이러한 문제를 해결하기 위해 등장한 개념이 바로 가상 DOM(Virtual DOM) 이다.

가상 DOM(Virtual DOM) 이란?

가상 DOM은 실제 DOM을 조작하기 전에, 메모리상에 존재하는 가상의 DOM을 먼저 변경하고, 최적화된 변경 사항만 실제 DOM에 반영하는 방식을 의미한다.

React 로 예를 든다면, 

React는 상태가 변경될 때마다 가상 DOM을 생성하고,

기존 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 적용한다. 

이러한 방식은 DOM을 죄소한으로 조작 하여 처리 횟수를 최소화한다.

그래서 리액트에서는 상태가 변경되면,

1. 새로운 가상 DOM 을 생성하고 

2. 이전 가상 DOM 과 새로운 가상 DOM 을 비교하여 변경된 부분을 찾고

3. 변경된 부분만 실제 DOM에 반영한다. 

 

이 과정을 거치게 되면 불필요한 DOM 조작을 줄이고, 성능을 향상시킬 수 있다. 

 

DOM 과 가상 DOM 을 이해하는 것은 단순히 개념을 아는 것을 넘어서, 실제 프로젝트에서 최적화된 성능을 내기 위해 필수적이다. 가상 DOM 을 사용헀다고 하여서 성능이 좋아지는 것은 아니지만 작은 규모의 프로젝트에서는 직접 DOM을 조작하는 것이 더 빠를 수도 있고, React 와 같은 라이브러리를 사용할 때도 불필요한 렌더링을 줄이는 것이 중요하다.