230824 개발일지 TIL - 리얼 돔(Real DOM) vs 버츄얼 돔(Virtual DOM)

리얼 돔(Real DOM) vs 버츄얼 돔(Virtual DOM)

웹 페이지를 만드는 데 있어 중요한 개념 중 하나가 바로 DOM 이다.
(DOM : Document Object Model의 약자로, 웹 페이지의 구조를 표현하는 모델)

리얼 돔(Real DOM)
리얼 돔은 웹 페이지의 구조를 표현하는 객체 모델이다. HTML 태그 하나하나가 객체로서 트리 형태로 구성되어 있다.

하지만, 문제는 변화가 일어날 때마다 전체 페이지를 다시 그려야 한다는 것이다. 예를 들어, 단지 한 단락의 텍스트만 변경되었을 경우에도 전체 웹 페이지가 다시 로드되어야 하는데 이 과정은 비효율적이며 시간과 자원을 많이 소모하게 된다.

버츄얼 돔(Virtual DOM)
버츄얼 돔은 실제 DOM의 가벼운 복사본으로 생각할 수 있다. React와 같은 프론트엔드 라이브러리/프레임워크에서 주로 사용된다.

버츄얼 돔에서는 UI 변화가 일어날 때, 이 변화들을 실제 DOM에 직접 반영하지 않고, 버츄얼 돔에 먼저 적용한다. 그 후 이전 버전의 버츄얼 돔과 비교하여 실제로 변경된 부분만을 찾아내고, 그 부분만 실제 DOM에 반영한다(Diffing and Reconciliation).

이 방식으로 인해 불필요한 렌더링 과정을 줄일 수 있으며 성능 개선 효과를 가져오게 된다.

결론
결론적으로, 작은 변화가 발생했을 때 전체 페이지를 다시 로드하는 리얼돔보다는 필요한 부분만 업데이트하는 버추얼돔이 자원 사용 면에서 보다 효율적이다.