가상 돔(Virtual DOM)이란
가상 돔(Virtual DOM)을 알아보자.
가상 돔(Virtual DOM)이란?
가상 돔(Virtual DOM)은 실제 돔(Document Object Model)을 추상화하여 메모리 상에
가상으로 만들어진 돔 구조를 말한다.
가상 돔은 React, vue 등과 같은 라이브러리나 프레임워크에서 주로 사용되며,
UI 업데이트를 더 효율적으로 처리할 수 있게 돕는다.
DOM(Document Object Model)
웹 사이트에 접속하면 보이는 각각의 요소(Element) 들이 모여서 하나의 문서(Document) 를 구성한다.
이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 DOM이다.
실제 돔(DOM)과 가상 돔(Virtual DOM)의 차이
실제 돔은 웹 페이지의 실제 구조를 나타내는 트리 구조이며, 브라우저가 화면을 그릴 때 사용된다.
반면 가상돔은 메모리에 존재하는 가상의 돔 구조이며, 변경사항을 추적하고
최적화된 방식으로 업데이트할 수 있도록 도와준다.
이를 통해 성능을 향상시키고 개발자의 작업을 간편화한다.
가상 돔의 작동원리⭐
가상 돔은 상태(state)의 변화를 감지하고, 이에 따른 UI변경을 처리한다.
상태가 변경되면 React는 새로운 가상 돔을 생성하고, 이전 가상 돔과 비교하여 변경된 부분만
실제 돔에 반영한다.
이를 통해 불필요한 돔 조작을 최소화하여 성능을 향상시킨다.
가상 돔의 장점
1. 성능 향상
변경 사항을 추적하고 최소한의 변경만을 적용하여 성능을 향상시킨다.
2. 개발 생산성 향상
UI 업데이트를 더 효율적으로 처리할 수 있어 개발 생산성을 높힌다.
가상 돔의 활용
가상 돔은 React와 같은 라이브러리나 프레임워크에서 주로 사용되며,
React의 경우, 상태(state)의 변수화를 추적하고 가상 돔을 통해 UI를 업데이트한다.
결론
가상 돔은 웹 개발에서 성능 최적화와 개발 생산성 향상을 위한 중요한 기술이다.
React를 비롯한 많은 프레임워크/라이브러리에서 활용되며, 웹 개발에 있어 필수적인 개념이다.