Published on

리액트 가상DOM이란?

Authors

가상 DOM 이란?

가상 DOM을 알기까지 위한 :

사용자가 웹을 들어가면 최소한 HTML, CSS, JS를 사용 하는 웹에 들어가게 된다. 그리고 실제 파싱하는 순서도 HTML, CSS, JS 순이다.

순서대로 간단하게 설명하자면

HTML :

  • 첫 번째로 파싱됨
  • 웹 페이지의 기본 구조, 컨텐츠 정의
  • HTML 문서 파싱과 동시에 DOM 트리 생성

CSS :

  • 두 번째로 파싱됨
  • HTML의 정의된 요소들의 스타일 결정
  • HTML 파싱, DOM 구성 후에 브라우저에 다운로드 되고 해석됨.

JS :

  • 세 번째에 파싱됨
  • DOM 생성이 완료 된 후에 다운로드, 해석됨

HTML 내용이 먼저 나타나고, 스타일이 적용된 후에 JavaScript에 의한 동작이 추가 됨

그럼 뭐가 문제인가?

내가 기초지식으로 알고 있는 리액트는 JS에서 HTML을 소환한다.

pepe 뭔가 이상하다.. 그럼 순서가 어떻게 되는거지?

AI에게 물어봤다

gpt 가상 DOM에 대해 더 깊게 들어가보자

1. 초기 로딩

  1. HTML 파일 로드

    • 브라우저는 리액트 애플리케이션의 기본 HTML 파일(일반적으로 public/index.html)을 다운로드
    • 이 HTML 파일은 최소한의 마크업을 포함하며, 리액트가 렌더링될 루트 요소를 정의
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 리액트가 렌더링될 루트 요소 -->
    <script src="/static/js/bundle.js"></script>
    <!-- 번들된 JS 파일 -->
  </body>
</html>

2. 리액트 애플리케이션 초기화

  1. 리액트 DOM 라이브러리
  • 로드된 JavaScript 파일은 리액트 라이브러리와 애플리케이션 코드를 실행
  • ReactDOM.render 메서드를 호출하여 리액트 컴포넌트를 실제 DOM에 마운트함
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
  1. 가상 DOM 생성
  • ReactDOM.render는 컴포넌트를 가상 DOM에 렌더링함
  • 가상 DOM은 메모리 내에서 실제 DOM의 가벼운 복사본을 유지하며, 변경 사항을 추적함
  • JSX 코드는 React.createElement 호출로 변환되어 가상 DOM 객체를 생성함

3. 가상 DOM 업데이트 및 렌더링

  1. 컴포넌트 상태 변경

    • 컴포넌트의 상태(state)나 속성(props)이 변경되면, 해당 컴포넌트와 하위 컴포넌트가 다시 렌더링됩니다.
    • 이 과정에서 새로운 가상 DOM이 생성

  2. 다이프 알고리즘

    • 리액트는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 수정된 부분 추적
    • 이 비교 작업은 효율적인 다이프 알고리즘(diffing algorithm)을 사용하여 빠르게 수행.

  3. 실제 DOM 업데이트

    • 리액트는 가상 DOM 비교 결과를 바탕으로 최소한의 실제 DOM 업데이트를 수행 함
    • 필요한 경우에만 실제 DOM의 요소들을 생성, 수정 또는 제거하여 성능을 최적화

4. 이벤트 및 상호작용

  1. 이벤트 바인딩

    • 리액트는 이벤트 핸들러를 가상 DOM에 바인딩 함
    • 이벤트가 발생하면, 리액트는 이를 가상 DOM에서 처리하여 필요한 상태 변경을 수행하고 다시 렌더링 함

  2. 재렌더링 및 최적화

    • 상태나 속성 변경으로 인해 컴포넌트가 재렌더링되면, 리액트는 가상 DOM을 다시 생성하고 비교하여 최소한의 실제 DOM 업데이트를 수행함
    • 리액트는 효율적인 업데이트를 위해 메모이제이션, 배치 업데이트, 불변성 등을 사용함

요약

리액트 애플리케이션의 렌더링 과정은 다음과 같이 요약할 수 있습니다:

  1. 초기 HTML, CSS, JavaScript 파일을 로드.
  2. 리액트 라이브러리를 초기화하고, 루트 컴포넌트를 가상 DOM에 렌더링.
  3. 컴포넌트의 상태나 속성 변경 시, 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 반영
  4. 이벤트와 상호작용을 통해 가상 DOM을 업데이트하고, 최소한의 실제 DOM 변경을 수행

장점

  • 최소한의 업데이트
  • 효율적인 다이프 알고리즘
  • 효율적인 이벤트 처리

단점

  • 러닝 커브 : 복잡성, JSX 문법
  • 보일러플레이트 코드 : 웹팩, 바벨, 반복적 코드
  • SEO : 클라이언트 사이드 렌더링
  • 상태관리 : 상태관리가 복잡성
  • 성능 : 메모리 사용량, 다량의 컴포넌트, 재렌더링 방지

그 외

가상 DOM 트리는 2개.

  1. 현재 가상 DOM 트리
    1. 마지막으로 렌더링한 상태를 반영한 가상 DOM
    2. 실제 DOM의 현재 상태와 일치
    3. 현재 화면에 렌더링 되어있는 상태
  2. 새로운 가상 DOM 트리
    1. 상태, 속성의 변경에 따라 다시 렌더링된 결과 나타냄
    2. 수정이 발생할 경우 다시 렌더링 되어 생성됨
    3. 새로운 가상 DOM 트리는 컴포넌트의 새로운 상태를 반영

한 줄 요약

#2024-07-05 아직까진 맛있다

Discuss on Twitter • 깃허브에서 보기