데브허브 | DEVHUB | [React] Virtual DOM이란?
- Virtual DOM은 메모리 상에 존재하는 가상 표현이며, 실제 브라우저에 보이는 Real DOM과 구분됩니다. 🧠
- React는 JSX를 통해 HTML과 유사한 트리 구조의 React 노드를 생성하며, 이는 Virtual DOM의 형태입니다. 🌳
- 사용자 인터랙션(예: 입력) 발생 시, 변경 사항은 Real DOM이 아닌 Virtual DOM에 먼저 반영됩니다. ✍️
- React는 변경 전(Old)과 변경 후(New)의 Virtual DOM을 비교하여 차이점(Diff)을 식별합니다. 🔍
- 이 차이점 식별 과정은 React의 Fiber 아키텍처에 의해 수행됩니다. ⚙️
- 오직 변경된 부분(Diff)만 Real DOM에 반영되어 다시 그려지므로, 전체 페이지를 다시 그리는 비효율을 줄입니다. 🚀
- Virtual DOM은 불필요한 Real DOM 조작을 최소화하여 웹 애플리케이션의 성능을 최적화하는 핵심 메커니즘입니다. ✨