버츄얼돔과 리얼돔의 차이

리액트는 버추얼 돔과 실제 돔을 사용하여 빠른 렌더링 성능을 제공하게 되는데, 두 돔은 다음과 같은 차이점이 있다.

 

정의

리얼 돔은 웹 페이지의 실제 구조를 표현하는 객체 및 요소의 트리 구조. 모든 웹 페이지는 이러한 돔트리와 그 요소들을 사용하여 페이지를 구성.

버추얼 돔은 실제 돔의 메모리에 기록되는 복제본, 웹 페이지의 변경 사항을 임시로 추적하는데 사용.

 

성능

리얼 돔은 돔 조작이 빈번하게 발생하면 성능에 악영향을 줄 수 있음. 돔 업데이트가 느려질수록 페이지 렌더링이 느려져 사용자 경험이 저하됨.

버추얼 돔은 변경 사항들을 버추얼 돔에서 먼저 처리하고, 업데이트 된 곳만 변경하여 실제 돔에 적용함으로써 효율적으로 렌더링.

 

작동 원리

리얼 돔은 사용자가 웹 페이지를 조작할 때마다 실제 돔에 변화가 일어나면서 브라우저가 계속해서 그 변화를 인지하고 렌더링해야 한다.

버추얼 돔은 사용자가 웹 페이지를 조작할 때마다 먼저 버추얼 돔의 복사본을 수정하고, 이 변화를 한 번에 업데이트한 뒤 브라우저에 리렌더링을 요청.

이러한 과정을 통해 불필요한 리렌더링을 줄이고 성능을 향상.

최초 버추얼 돔과 새로운 버추얼 돔의 차이점만 실제 돔에 반영함으로써 성능을 최적화.

 

요약하면 리액트의 버추얼 돔은 리얼 돔의 복사본 역할을 하여, 웹 페이지의 렌더링 속도와 성능을 향상시키게 됩니다. 버추얼 돔에서의 변화를 먼저 처리한 뒤, 최소한의 변경만 실제 돔에 적용함으로써 불필요한 리렌더링을 줄이는 원리를 사용.