가상 DOM(Virtual DOM)은 React 및 유사한 라이브러리에서 사용되는 개념으로, 브라우저의 실제 DOM의 가벼운 복제본임.
일반적으로 브라우저에서 HTML 문서는 객체 모델로 표현됨.
이것을 DOM(Document Object Model)이라고 부름.
이 DOM은 브라우저가 화면에 표시하는 웹 페이지의 구조를 나타냄.
DOM은 HTML 요소의 트리 구조로 표현되며, 각 요소는 객체로 표현됨.
React는 상태(State) 변화에 따라 UI를 업데이트해야 할 때마다 가상 DOM을 사용함.
이것은 실제 DOM과 동일한 구조를 가지지만, 실제로는 메모리에 존재함.
React는 가상 DOM을 사용하여 UI의 변경 사항을 추적하고, 필요한 경우에만 실제 DOM에 반영함.
가상 DOM의 주요 장점:
-
성능 향상:
React는 가상 DOM을 사용하여 UI의 변경 사항을 비교하고 최소한의 실제 DOM 조작만 수행하여 효율적인 업데이트를 가능하게 함.
이를 통해 불필요한 렌더링이나 DOM 조작을 최소화하고, 성능을 향상시킴.
-
효율적인 렌더링:
React는 가상 DOM을 사용하여 전체 UI를 다시 렌더링하지 않고도 변화가 있는 부분만 업데이트할 수 있음.
이는 개발자가 필요한 부분만 업데이트할 수 있게 하고, 불필요한 렌더링을 방지함.
-
크로스 플랫폼 호환성:
React의 가상 DOM은 브라우저에 종속되지 않음.
서버 사이드 렌더링(SSR)과 같은 다양한 환경에서도 사용할 수 있음.
이는 React 애플리케이션을 여러 플랫폼에서 실행하고 확장할 수 있는 유연성을 제공함.
가상 DOM은 React의 핵심 개념 중 하나
성능을 향상시키고 효율적인 UI 업데이트를 가능하게 함.
실제 DOM과 동일한 구조를 가지지만 메모리 상에 존재하여 변경 사항을 비교하고 최적화된 업데이트를 수행함.
