렌더링 그리고 커밋

리액트 화면 업데이트, 세 단계로 이해하기

1. 트리거 (Trigger)

상태(state)나 props가 바뀔 때(리렌더) 리액트가 "화면을 바꿔야겠다"라고 신호를 받는 순간

import { useState } from "react";

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

  // 1. 트리거: 버튼을 누르면 setCount가 실행됨 → 상태 변경
  // 2. 렌더링: Counter 함수가 다시 실행됨 → 새 설계도(JSX) 생성
  // 3. 커밋: 바뀐 부분만 실제 화면(DOM)에 적용
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

• 사용자가 버튼을 클릭하면 `setCount(count + 1)`이 실행.
• 이게 바로 트리거 (상태가 바뀌었으니, 리액트가 렌더링을 시작함)

2. 렌더링 (Rendering)

"지금 상태로 화면을 어떻게 보여줄지" 리액트가 컴포넌트 함수를 다시 실행해서 설계도(가상 DOM)를 만드는 단계

• 위 코드에서 버튼을 클릭하면
  React가 `Counter`함수를 다시 실행해서
  `retrun (<button..>{counter}</button>)` 을 만든다.
• 이 때 count가 1로 바뀌었다면
  새 설계도에서는 `<button>1</button>`이 들어있다.
• 아직 실제 화면(DOM)은 안 바뀜
  (리액트가 내부적으로 "어떻게 바꿀지" 미리 계산만 함)

3. 커밋 (Commit)

렌더링 단계에서 바꿀 부분이 있으면, 실제 DOM에 적용하는 단계

• 리액트가 이전 설계도와 새 설계도를 비교해서
  '버튼 내용이 0에서 1로 바뀌었네?' 라고 판단
• 실제로 브라우저 화면의 버튼 텍스트를 1로 바꿈

 

이해했는지 체크✅

[트리거]처음 화면이 나타날 때도 트리거(렌더링을 시작하는 신호) → 버튼을 클릭해서 count가 바뀌는 순간도 트리거
(즉, "화면을 바꿔야 할 이유(신호)"가 생기는 모든 순간이 트리거이다.)

→ [렌더링]버튼을 클릭해서 count가 바뀌면, React가 컴포넌트 함수를 다시 실행 → 지금 상태(count + 1)로 화면을 어떻게 보여줄지 가상DOM(설계도)를 만든다.

→ [비교]이전 가상DOM과 새 가상 DOM을 비교해 [커밋]바뀐 부분만 화면에 반영

 

1. 트리거: 상태나 props가 바뀌는 신호(처음 렌더, 버튼 클릭 등)
2. 렌더링: 새 가상DOM(설계도) 만들기
3. 비교: 이전 설계도와 새 설계도 비교
4. 커밋: 바뀐 부분만 실제 화면에 적용