리액트의 렌더링, 초기 렌더링, 그리고 Reconciliation

리액트를 다루다 보면 렌더링에 대해 많이 듣게 될 거예요. 리액트에서 렌더링은 단순히 “화면에 그림을 그린다” 수준이 아니라, 최대한 효율적으로 DOM 업데이트를 최소화해서 전체적인 성능을 챙기는 데 초점을 맞춥니다. 그래서 처음 화면을 그릴 때와, 상태가 바뀌어 재렌더링할 때, 리액트가 다르게 동작하죠.

---

 

 

1. 초기 렌더링: 첫 화면을 DOM에 주입하기

 

처음 앱이 로드되면, 리액트는 컴포넌트를 쭉 읽으면서 HTML을 문자열 형태로 생성합니다. 그 후 특정 DOM 노드에 HTML을 주입해 첫 화면을 그려요. 예를 들어, document.getElementById('root') 같은 특정 DOM에 만들어진 내용을 넣는 방식입니다. 이때 이벤트도 설정해서 사용자와 상호작용할 수 있도록 준비하죠.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

 

여기서 ReactDOM.render()가 바로 초기 렌더링을 위한 첫 DOM 주입을 담당합니다. 이 코드가 실행되면 <h1>Hello, React!</h1>라는 HTML이 #root에 들어가 화면에 보이는 거죠.

---

2. 상태 변화와 재렌더링: render 함수의 역할과 조화(Reconciliation)

 

리액트는 상태나 props가 바뀔 때마다 render 함수를 재실행합니다. 하지만 매번 전체 DOM을 업데이트하면 성능이 너무 떨어지겠죠? 그래서 리액트는 가상 DOM에서 변경된 부분만 실제 DOM에 반영하는 “조화(Reconciliation)” 과정을 통해 최적화합니다.

 

render 함수는 어떻게 최적화할까?

 

리액트의 render 함수는 변경된 상태에 따라 가상 DOM을 새로 생성하고, 이전 가상 DOM과 비교하면서 업데이트가 필요한 부분만 추려냅니다. 이렇게 가상 DOM이 기존 DOM과 “비교(diffing)“를 하고, 최소한의 연산으로 실제 DOM을 조작하죠.

 

예제: 변경된 부분만 업데이트하기

 

상태 변화에 따른 부분 업데이트가 어떻게 동작하는지 간단히 예를 들어볼게요.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

여기서 버튼을 클릭해 count 상태가 업데이트되면, 리액트는 Counter 컴포넌트를 다시 렌더링합니다. 하지만 리액트가 실제로 DOM의 모든 내용을 업데이트하지 않고, 오직 <h1>{count}</h1> 부분만 새로 업데이트하죠. 리액트는 새로운 가상 DOM과 이전 가상 DOM을 비교해서 진짜 필요한 부분만 업데이트하도록 최적화합니다. 이를 통해 루트 노드부터 전체를 렌더링하는 것처럼 보이지만, 실제로는 변경된 부분만 쏙쏙 골라내어 DOM 트리를 업데이트해 성능을 최대한 확보하는 거죠.

---

3. render 함수의 역할: 변경 최소화와 최적화

 

리액트의 render 함수는 그저 화면에 무작정 그려주는 게 아니라, 컴포넌트의 변경 사항을 분석해서 DOM 업데이트를 최소화하는 데 중점을 둡니다. 새 가상 DOM을 만들고, 기존 가상 DOM과 비교하는 과정을 통해 DOM 조작을 줄이면서도 UI가 바뀌는 모습을 실시간으로 보여주는 거죠.

 

이렇게 리액트는 초기 렌더링에서 전체를 한 번 그리고, 이후엔 가상 DOM 비교와 최소 연산을 통해 변경된 부분만 업데이트해 성능을 높입니다.