[REACT] 렌더링과 커밋 과정: 화면에 나타나기까지의 3단계

트리거: 렌더링 요청

렌더링은 두 가지 경우에 발생합니다.

• 초기 렌더링: 애플리케이션이 처음 실행될 때, 루트 컴포넌트를 DOM에 마운트하기 위해 렌더링이 트리거됩니다.
• 상태/Props 변경: useState나 useReducer를 통해 상태가 업데이트되거나, 부모로부터 새로운 props가 전달되면 재렌더링이 발생합니다.

렌더: 컴포넌트 호출과 JSX 계산

렌더 단계에서 React는 컴포넌트를 호출해 현재 상태와 props를 기반으로 JSX 트리를 생성합니다. 이 과정은 순수 함수처럼 동작하여, 동일한 입력에 대해 항상 동일한 출력을 반환합니다. 렌더링은 실제 DOM에 반영되기 전, 메모리 내에서 계산되는 단계로 볼 수 있습니다.

import { useState, useEffect } from 'react';

export default function ProgressTracker() {
  const [progress, setProgress] = useState(0);

  // 2초마다 진행률을 10%씩 증가
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev < 100 ? prev + 10 : 100));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', maxWidth: '400px' }}>
      <h2>진행률: {progress}%</h2>
      <div 
        style={{
          width: `${progress}%`,
          height: '20px',
          backgroundColor: '#4caf50',
          transition: 'width 0.3s ease'
        }}
      />
      <p>작업이 진행 중입니다...</p>
    </div>
  );
}

커밋: DOM에 반영

렌더 단계에서 계산된 JSX 트리가 준비되면, React는 이를 실제 DOM에 반영합니다. 이 과정에서 React는 이전 렌더링 결과와 비교해 변경된 부분만 업데이트합니다.

• 초기 렌더링: DOM 노드를 새로 생성해 화면에 붙임.
• 재렌더링: 이전 렌더링 결과와 비교하여 변경된 부분만 최소한의 작업으로 업데이트합니다. 위 예제에서 <p>는 변경되지 않으므로 DOM에서 수정되지 않습니다.