[FE 개발] 가상 돔과 실제 돔

 

가상 돔과 실제 돔

 

 

실제 돔(Real DOM)

브라우저에서 관리 : 브라우저가 직접 관리하는 HTML문서의 트리구조로 이 구조는 HTML 문서의 요소들을 표현하고, 각 요소는 객체로 나타내어집니다.
직접 조작 : 변경이 있을 때 마다 브라우저가 실제 돔을 직접 조작하고, 이에 따른 리플로우와 리페인트가 발생합니다.
성능 이슈 : 복잡한 작업이나 다수의 엘리먼트를 조작할 때 성능문제가 일어날 수 있습니다.

 

 

가상 돔(virtual DOM)

메모리 상의 복제본 : 실제 돔의 가벼운 복사본으로, 메모리상에서 관리됩니다.
가볍고 빠른 동작 : 변경 사항을 빠르게 처리하기 위해 사용되며, 직접적으로 화면에 렌더링되지않습니다.
비교 및 패치 : 변경이 필요한 경우, 변경된 부분을 이전 가상 돔과 실제 가상돔을 비교하여 찾아낸 뒤, 실제 돔에만 변경사항을 반영합니다.

 

 

가상 돔은 실제 돔의 조작을 최소화하여 효율적인 렌더링이 가능하게 하므로,

 

UI 업데이트를 더 빠르고 효율적으로 수행할 수 있게 해주는 중요한 요소입니다.