2026-02-02

렌더링(Rendering)과 Virtual DOM

렌더링이란

애플리케이션의 상태(state)가 화면(UI)으로 변환되는 전체 과정 (프론트엔드)

단순히 “화면이 그려진다”가 아니라,

  • 상태 변화가 발생하고
  • 어떤 UI가 그려질지 계산한 뒤
  • 실제 브라우저 화면에 반영되는 모든 흐름을 포함

브라우저 렌더링 흐름

  1. HTML 파싱 → DOM 생성
  2. CSS 파싱 → CSSOM 생성
  3. DOM + CSSOM → Render Tree 생성: 실제로 화면에 표시될 노드만 포함
  4. Layout (Reflow): 각 요소의 위치와 크기 계산
  5. Paint (Repaint): 색상, 배경, 그림자 등 시각적 요소 그리기
  6. Composite: 레이어를 합성하여 최종 화면 출력

React에서의 렌더링 개념

React에서 렌더링 = Virtual DOM을 생성하는 과정

  • 브라우저에 바로 그리는 것이 아니라
  • 어떤 UI가 나와야 하는지 계산하는 단계

React 렌더링

  • Render 단계
    • 컴포넌트 함수 실행
    • Virtual DOM 생성
  • Commit 단계
    • 변경된 부분만 실제 DOM에 반영

DOM이란

HTML 문서를 브라우저가 이해하고 조작할 수 있도록 트리 구조로 표현한 객체 모델

image.png

  • HTML 문서 ≠ DOM
  • HTML은 정적인 텍스트
  • DOM은 브라우저 메모리 위에 올라간 객체 구조

DOM 조작의 문제점

⇒ DOM 조작은 비싸다.

  • DOM 변경 → 브라우저 렌더링 파이프라인 재실행
  • Layout(Reflow) / Paint(Repaint) 발생 가능
  • 브라우저 내부 엔진 개입 필요

Virtual DOM이란

Virtual DOM은 실제 DOM 구조를 그대로 흉내 낸 JavaScript 객체 트리

image.png

React는 상태가 바뀔 때마다

  • VirtualDOM을 비교(diffing)하여 실제로 변경된 부분만 식별
  • 이후, 변경된 부분만 실제 DOM에 반영
  • 불필요한 렌더링을 줄이고, 애플리케이션의 성능을 크게 향상

Virtual DOM의 핵심 목적

DOM 조작을 빠르게 하는 것이 아니라, DOM 조작을 “최소화”하는 것

  • 실제 DOM 접근은 매우 비싸다
  • JS 객체 비교는 상대적으로 빠르다
  • 변경을 한 번에 묶어 처리(Batching) 가능

Diffing 알고리즘의 특징

React의 Diffing 알고리즘은 몇 가지 가정을 기반으로 동작한다.

  • 같은 레벨의 요소만 비교
  • 타입이 다르면 하위 트리를 통째로 교체
  • key가 같으면 같은 컴포넌트로 판단

이 때문에 리스트 렌더링에서

key는 성능과 UI 안정성에 직접적인 영향을 준다.

상태(state) 변경 시 흐름

React에서 상태가 변경되면 다음 순서가 실행된다.

  1. setState / useState 호출
  2. 업데이트 스케줄링
  3. 컴포넌트 재실행
  4. 새로운 Virtual DOM 생성
  5. 이전 Virtual DOM과 Diff
  6. 실제 DOM에 최소 변경 반영
  7. 브라우저 렌더링 진행

이 과정에서 setState는

  • 즉시 반영되지 않으며
  • 비동기적으로 묶여 처리된다.

렌더링이 발생하는 조건

  • state 변경
  • props 변경
  • 부모 컴포넌트 렌더링
  • context 값 변경

렌더링이 발생한다고 해서 항상 실제 DOM이 바뀌는 것은 아니다.

(→ Diff 결과가 없으면 DOM 변경 없음)

렌더링 최적화 관점

→불필요한 렌더링을 줄이는 것

  • state 최소화
  • 정확한 key 사용
  • React.memo
  • useMemo, useCallback
  • layout 영향을 주는 스타일 변경 최소화
  • 애니메이션은 transform, opacity 활용

요약

  • DOM은 HTML 문서를 브라우저가 조작할 수 있도록 만든 객체 트리
  • DOM 변경은 렌더링 비용이 크기 때문에 성능 이슈
  • React는 이를 해결하기 위해 Virtual DOM을 사용해 변경 사항을 먼저 계산, 최소한의 DOM 업데이트만 수행
  • 렌더링은 Virtual DOM을 생성하는 과정
  • 렌더링이 발생해도 실제 DOM 변경은 필요한 경우에만발생

참고자료

  • https://velog.io/@aksen5240/React%EC%9D%98-%EB%98%91%EB%98%91%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EB%B2%95-VirtualDOM
  • https://haegomm.tistory.com/entry/React-%EA%B0%80%EC%83%81%EB%8F%94Virtual-DOM%EC%9D%B4%EB%9E%80
  • https://together-cs.tistory.com/62

results matching ""

    No results matching ""