리액트의 가상 DOM(Virtual DOM)에 대한 핵심 개념을 리액트 레퍼런스 문서 링크와 함께 3가지로 정리해보았습니다.
1.성능 향상
■ 요소 비교하기 (Reconciliation)
리액트의 "조정(reconciliation)" 과정은 가상 DOM의 변경 사항을 비교하는 Diffing 알고리즘을 사용하여 실제 DOM에 최소한의 변경 사항만 적용하는 핵심 과정입니다.
이 과정에서 리액트는 변경된 부분만 효율적으로 업데이트하여 성능을 향상시킵니다.
- https://ko.legacy.reactjs.org/docs/reconciliation.html
또한, 리액트 18이후 동시성 렌더링 도입으로 인해서 렌더링의 과정이 많이 변경되었으므로 참고할 수 있습니다.
- https://react.dev/blog/2022/03/29/react-v18
2. 개발 편의성 향상
■ 선언적 UI 설계
리액트는 개발자가 UI의 최종 상태를 선언적으로 작성하도록 지원하며, 리액트가 상태 변화에 따라 자동으로 UI를 업데이트합니다.
이는 개발자가 직접 DOM을 조작하는 대신, 데이터의 변화에 집중할 수 있도록 해줍니다.
- https://ko.legacy.reactjs.org/docs/thinking-in-react.html
■ 복잡한 UI 관리 용이
컴포넌트 기반 아키텍처와 가상 DOM을 통해 복잡한 UI의 변경 사항을 효율적으로 관리할 수 있습니다.
컴포넌트 단위로 UI를 구성하여 재사용성을 높이고 유지 관리를 용이하게 합니다.
- https://ko.legacy.reactjs.org/docs/components-and-props.html
■ 크로스 플랫폼 개발
React Native를 통해 모바일 앱 개발에도 가상 DOM 개념을 적용하여 크로스 플랫폼 개발을 지원합니다.
- https://reactnative.dev/docs/getting-started
3. 브라우저 리플로우 및 리페인트 최소화
실제 DOM을 직접 조작하는 것보다 가상 DOM을 사용하는 것이 브라우저의 리플로우 및 리페인트 횟수를 줄여 성능을 향상시키는 데 도움이 됩니다.
리액트는 변경 사항을 일괄적으로 처리하여 브라우저의 부담을 줄입니다.
- https://ko.legacy.reactjs.org/docs/optimizing-performance.html
React
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati
react.dev
리액트 공식 문서를 참고하여 작성했습니다.
'위클리 페이퍼' 카테고리의 다른 글
| 리액트가 렌더링하는 과정에 대해 (1) | 2025.02.19 |
|---|---|
| 렉시컬 스코프의 개념과 특성 (0) | 2025.02.17 |
| 자바스크립트에서 this 키워드의 사용과 특성 (0) | 2025.02.17 |
| var, let, const를 설명하기 (모던 자바스크립트) (1) | 2025.02.04 |
| 브라우저의 동작 방식 요약 (MDN Docs) (1) | 2025.02.04 |