[React] Virtual DOM

Dorong·2023년 3월 16일
0

React

목록 보기
3/29
post-thumbnail

✅ 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 >를 공부하며 작성했습니다

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글