면접 - React Virtual DOM

질문:
React의 가상 DOM이 실제 DOM과 어떤 방식으로 다르게 동작하며 성능 최적화에 어떻게 기여하는지 설명해주시고,
React Native에서는 이 개념이 어떻게 적용되는지도 함께 말씀해주시겠어요?

답변 스크립트:
React의 가상 DOM은 실제 DOM의 사본을 메모리 상에 유지하면서, 상태 변화가 생겼을 때 변경 전과 후의 가상 DOM을 **비교(diffing)**하여 변경된 부분만 실제 DOM에 반영하는 구조입니다.
이 과정에서 React는 **얕은 비교(shallow comparison)**를 통해 최소 단위의 업데이트만 수행하기 때문에, 전체 DOM을 다시 렌더링하는 전통적인 방식보다 훨씬 효율적으로 작동합니다.

실제 DOM 조작은 브라우저에서 비용이 크기 때문에, 가상 DOM을 통해 변경 사항을 먼저 계산하고, 필요한 부분만 바꾸는 방식은 성능 최적화에 큰 도움이 됩니다.

React Native의 경우는 웹처럼 브라우저 DOM이 존재하지 않기 때문에, 가상 DOM이 실제 DOM이 아닌 Native 컴포넌트 트리로 변환됩니다. 즉, React는 내부적으로 Virtual DOM을 구성하고, 이 변경 사항을 Native 환경에 맞게 Android나 iOS의 컴포넌트로 매핑해서 처리합니다.
이 방식 덕분에 React의 선언적 UI와 Virtual DOM 구조를 그대로 유지하면서도, 플랫폼별 퍼포먼스를 확보할 수 있었습니다.