[React] Virtual DOM

✅ DOM

🔸 개념

• Document Object Model
• 객체로 문서 구조를 표현하는 방법으로 XML, HTML로 작성
• 웹 브라우저는 DOM을 활용해 객체에 JS와 CSS 적용
• 트리 형태 => 특정 노드 찾기, 수정, 제거, 삽입 가능

🔸 성능 이슈

• DOM은 동적 UI에 최적화되어 있지 않다는 문제점
• 기본적으로는 정적인 HTML을 JS 활용해 동적으로 만들 수 있음
• 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근해 변화 주다보면 성능 이슈 발생
• DOM 자체는 빠름
• but 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고, 레이아웃을 구성하고 페이지를 리페인트
• 이 과정에서 시간이 지연됨

✅ React의 Virtual DOM

🔸 개념

• 데이터의 변화가 생겼을 때, 실제 DOM에 접근해 조작하는 대신, 추상화한 JS 객체를 구성해 사용
• 실제 DOM의 사본과 비슷
• 업데이트 절차
  - 데이터 업데이트
  • 전체 UI를 Virtual DOM에 리렌더링
  • 이전 Virtual DOM 내용과 비교
  • 바뀐 부분만 실제 DOM에 적용

🔸 성능에 대한 오해

• 리액트는 대규모 애플리케이션 구축을 위해 구상됨
• 간단한 소규모 정적 프로젝트 등에서는 오히려 비효율적일 수 있음

🔸 리액트는 라이브러리

• MVC 등의 구조와 다르게 리액트는 오직 V(View)만 담당
• 리액트는 프레임워크가 아닌 라이브러리
• 데이터 모델링, 라우팅 등 부가기능을 내장하고있지 않음
• but 다양한 라이브러리를 사용가능
• 또한 다른 웹 프레임워크나 라이브러라와 혼용 가능

🌟 해당 내용은 < 김민준, 리액트를 다루는 기술, 길벗, 2022, 908p >를 공부하며 작성했습니다