[React] 가상 DOM (Virtual DOM)

2024. 8. 6. 16:26· FrontEnd/React
목차
  1. 1.가상 DOM
  2. 2.가상 DOM 개념
  3. 2-1.가상 DOM 생성
  4. 2-2.렌더링
  5. 2-3.성능 최적화
  6. 3.가상 DOM의 작동 방식
  7. 3-1. Initial Render (초기 렌더링)
  8. 3-2.Update (업데이트)
  9. 3-3.Diffing (차이 비교)
  10. 3-4.Reconciliation (조정)
728x90

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/


1.가상 DOM

현대적인 UI 라이브러리에서 효율적으로 DOM을 관리하기 위해 사용되는 개념입니다.
가상 DOM은 실제 DOM과 비슷한 구조를 가지는 메모리 상의 가벼운 객체입니다.

 

 

2.가상 DOM 개념

2-1.가상 DOM 생성

가상 DOM은 실제 DOM의 복사본이 아니라 메모리 내에서 만들어지는 가벼운 객체입니다.
이 객체는 실제 DOM과 동일한 구조를 가지며, UI를 효율적으로 업데이트하기 위해 사용됩니다.

 

 

 

2-2.렌더링

컴포넌트의 상태나 속성이 변경될 때 가상 DOM을 사용하여 UI를 업데이트합니다.
이 과정에서 실제 DOM과의 차이를 비교하여 변경된 부분만 실제 DOM에 적용합니다.

 

 

 

2-3.성능 최적화

가상 DOM을 사용함으로써 리액트는 전체 DOM을 직접 조작하는 대신, 변경된 부분만을 최소한으로 업데이트합니다. 이로 인해 애플리케이션의 성능이 크게 향상됩니다.

 

 

 

3.가상 DOM의 작동 방식

3-1. Initial Render (초기 렌더링)

컴포넌트가 처음 렌더링될 때, 리액트는 가상 DOM을 생성합니다. 이 가상 DOM은 컴포넌트의 JSX 구조를 기반으로 하며, 실제 DOM의 구조와 유사합니다.

 

 

3-2.Update (업데이트)

컴포넌트의 상태나 속성이 변경되면, 리액트는 새로운 가상 DOM을 생성합니다.
이 새로운 가상 DOM은 이전의 가상 DOM과 비교됩니다.

 

 

 

3-3.Diffing (차이 비교)

리액트는 새로운 가상 DOM과 이전의 가상 DOM을 비교하여 변경된 부분을 식별합니다.
이 과정은 "디핑(Diffing)"이라고 하며, 리액트는 이 차이를 최소화하여 효율적으로 처리합니다.

 

 

3-4.Reconciliation (조정)

차이 비교 결과에 따라, 리액트는 실제 DOM을 업데이트합니다.
이때, 변경된 부분만을 실제 DOM에 적용하여 성능을 최적화합니다.

 

 

728x90

'FrontEnd > React' 카테고리의 다른 글

[React] useEffect  (0) 2024.08.06
[React] 생명주기(Lifecycle), 마운트 (Mount), 언마운트 (Unmount)  (0) 2024.08.06
[React] 리액트 훅(Hooks)  (0) 2024.08.06
  1. 1.가상 DOM
  2. 2.가상 DOM 개념
  3. 2-1.가상 DOM 생성
  4. 2-2.렌더링
  5. 2-3.성능 최적화
  6. 3.가상 DOM의 작동 방식
  7. 3-1. Initial Render (초기 렌더링)
  8. 3-2.Update (업데이트)
  9. 3-3.Diffing (차이 비교)
  10. 3-4.Reconciliation (조정)
'FrontEnd/React' 카테고리의 다른 글
  • [React] useMemo
  • [React] useEffect
  • [React] 생명주기(Lifecycle), 마운트 (Mount), 언마운트 (Unmount)
  • [React] 리액트 훅(Hooks)
아사_
아사_
프로그래밍 공부한거 정리해두는 메모장 블로그
아사_
개발공부 블로그
아사_
전체
오늘
어제
  • 분류 전체보기
    • FrontEnd
      • html
      • css
      • JavaScript
      • Node.js
      • React
      • React Native
    • BackEnd
      • SpringBoot
      • FastAPI
      • PHP
      • Flask
      • supabase
    • Language
      • Python
      • JAVA
      • Kotlin
      • C++
    • Development Tools
      • AWS
      • GIT,GITHUB
      • Docker
      • 메시지 브로커
      • 기타 도구,플랫폼
    • Computer Science
      • 개발지식
      • Server&Network
      • Algorithm&DataStructure
      • Security
      • DataBase
      • OS
    • AI
    • 기타
      • 잡다
      • Android
      • 도서
    • 클론코딩
      • 생활코딩 Express.js
      • 점프 투 장고
      • 생활코딩 Node.js
    • 프로젝트
      • DevQuest

인기 글

최근 글

250x250
hELLO · Designed By 정상우.v4.2.2
아사_
[React] 가상 DOM (Virtual DOM)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.