리액트 Virtual DOM

 

 

 

React의 Virtual DOM은 현대 웹 애플리케이션의 성능을 최적화하는 데 중요한 역할을 한다

Virtual DOM은 실제 DOM의 가벼운 메모리 내 복사본이다

React에서 UI의 상태가 변경될 때마다 전체 UI를 Virtual DOM에 다시 렌더링하고,

이 변경사항을 실제 DOM과 비교한 후,

실제 필요한 최소한의 변경만을 실제 DOM에 적용한다

이 접근 방식은 React 앱의 성능을 크게 향상시킨다

 

Virtual DOM 작동 원리

1. 초기 렌더링: React 컴포넌트가 렌더링될 때, React는 컴포넌트의 JSX를 사용하여 Virtual DOM을 생성하고 이 Virtual DOM을 사용하여 실제 DOM을 업데이트한다
2. 상태 변경: 애플리케이션의 상태가 변경되면, React는 새로운 Virtual DOM 트리를 생성하며 이 새로운 트리는 상태 변경 후의 UI를 반영한다
3. Diffing: React는 새로운 Virtual DOM 트리와 이전 Virtual DOM 트리를 비교("Diffing")하고 두 트리 사이의 차이점을 계산하여 실제 DOM을 업데이트해야 하는 변경사항을 결정한다
4. Reconciliation(조정): 차이점을 기반으로, React는 실제 DOM에 대한 최소한의 변경사항을 적용하여 UI를 업데이트하는데 이 과정은 가능한 한 효율적으로 수행되어, 앱의 성능에 미치는 영향을 최소화한다

 

Virtual DOM의 장점

• 성능 최적화:
  • Virtual DOM은 실제 DOM 조작을 최소화하여 성능을 크게 향상시킨다
  • DOM 조작은 비용이 많이 드는 작업이므로, 이를 줄임으로써 애플리케이션의 반응성이 향상된다
• 효율적인 업데이트:
  • Virtual DOM을 사용하면, React는 UI의 어느 부분이 실제로 변경되었는지 정확히 알 수 있으므로, 필요한 부분만 업데이트할 수 있다
  • 불필요한 업데이트를 방지
• 간결한 프로그래밍 모델:
  • 개발자는 UI의 최종 상태를 선언적으로 기술할 수 있으며, React가 중간 과정을 처리한다
  • 이는 개발자가 복잡한 변경 관리 로직을 작성할 필요가 없음을 의미한다

 

Virtual DOM은 React의 핵심 기능 중 하나로,

빠르고 효율적인 UI 업데이트를 가능하게 하여 복잡한 애플리케이션의 개발과 유지보수를 용이하게 한다