React 렌더링 원리와 Virtual DOM

React는 컴포넌트 기반 UI 라이브러리이며, 상태가 변경되면 UI를 자동으로 업데이트한다. 이 과정에서 React는 Virtual DOM과 Reconciliation 알고리즘을 사용해 효율적으로 화면을 갱신한다. 이번 글에서는 다음 개념들을 정리해보려고 한다.

• React 렌더링 과정
• Virtual DOM
• Reconciliation
• key의 역할

 

---

 

1️⃣ React 렌더링 과정

React에서 컴포넌트는 다음 과정으로 렌더링 된다.

state 또는 props 변경
               ↓
컴포넌트 함수 다시 실행
               ↓
새로운 Virtual DOM 생성
               ↓
이전 Virtual DOM과 비교
               ↓
변경된 부분만 실제 DOM에 반영

 

React는 전체 DOM을 다시 그리는 것이 아니라 변경된 부분만 업데이트한다.

 

---

 

2️⃣ Virtual DOM

Virtual DOM은 실제 DOM을 JavaScript 객체 형태로 표현한 것이다.

<div>
  <h1>Hello</h1>
</div>

React 내부에서는 대략 이런 구조로 표현된다.

{
  type: "div",
  children: [
    {
      type: "h1",
      children: ["Hello"]
    }
  ]
}

이렇게 DOM을 객체 형태로 메모리에 저장한 것이 Virtual DOM이다.

 

왜 Virtual DOM을 사용할까? 실제 DOM 조작은 비용이 비싸다.

• DOM 노드 생성
• DOM 변경
• layout 계산
• repaint

같은 작업은 브라우저 성능에 영향을 준다.

그래서 React는 실제 DOM을 직접 비교하지 않고, Virtual DOM끼리 먼저 비교한 후 필요한 부분만 실제 DOM에 반영한다.

 

---

 

3️⃣ Reconciliation (재조정)

Reconciliation은 이전 Virtual DOM과 새로운 Virtual DOM을 비교하는 과정이다. 이 과정에서 React는 Diffing 알고리즘을 사용한다.

기존 DOM

<ul>
  <li>A</li>
  <li>B</li>
</ul>

변경 후

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

React는 비교 후

<li>C</li>만 추가

하게 된다. 즉 전체 DOM을 다시 생성하지 않는다.

 

Diffing 알고리즘 특징

1. 다른 타입의 요소는 완전히 다른 트리

<div> → <span>

이 경우 React는 기존 DOM을 제거하고 새로 생성한다.

 

2. key를 통해 요소를 식별

리스트 렌더링에서 React는 key를 사용해 어떤 요소가 변경되었는지 판단한다.

 

---

 

4️⃣ key가 필요한 이유

React에서 리스트를 렌더링 할 때 key를 반드시 지정해야 한다.

const items = ["A", "B", "C"];

return (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

key는 각 요소를 고유하게 식별하기 위한 값이다.

 

1. key가 없으면 생기는 문제

예를 들어 리스트가 이렇게 바뀌었다고 가정하자.

기존

A B C

변경

B C D

key가 없으면 React는

A → B
B → C
C → D

라고 생각한다. 즉 모든 요소가 변경된 것으로 인식한다.

하지만 key가 있으면

A 삭제
D 추가

 

만 수행한다. 그래서 렌더링 성능이 좋아진다.

 

2. 좋은 key 선택 방법

좋은 key의 조건

• 고유한 값
• 변하지 않는 값

좋은 예

key={todo.id}

좋지 않은 예

key={index}

index는 리스트 순서가 바뀌면 React가 잘못 판단할 수 있다.

 

---

 

5️⃣ React 렌더링 핵심 정리

React의 렌더링 흐름은 다음과 같다.

state / props 변경
             ↓
컴포넌트 함수 재실행
             ↓
새로운 Virtual DOM 생성
             ↓
Reconciliation (Diffing)
             ↓
변경된 부분만 실제 DOM 업데이트

 

이 구조 덕분에 React는 효율적으로 UI를 업데이트할 수 있다.

 

---

 

정리

React의 핵심 렌더링 구조는 다음과 같다.

• Virtual DOM : 실제 DOM의 가상 표현
• Reconciliation : Virtual DOM 비교 과정
• Diffing 알고리즘 : 변경된 부분만 계산
• key : 리스트 요소 식별

이러한 구조 덕분에 React는 효율적인 UI 업데이트를 수행할 수 있다.