[React 개발 기초] 10. React가 렌더링하는 방식

학습 목표: React의 엔진룸을 들여다봄. 어떻게 그렇게 빠르게 화면을 업데이트 하는지?

 

(1) React에서 말하는 "렌더링"이 정확히 무엇?

렌더링 = 컴포넌트 함수를 실행하는 것

function Counter() {
  const [count, setCount] = useState(0);
  return <button>{count}</button>;
}

렌더링된다 = React가 Counter()를 호출한다는 뜻

 

충격의 진실

렌더링 ≠ 화면이 실제로 바뀌는 것!

"렌더링"
    ↓
함수 실행 → JSX 반환 → 가상 DOM 만들기
    ↓
"그 다음에" 화면 업데이트 (별개의 단계!)

렌더링은 "계산"이고, 화면 업데이트는 "반영"

---

(2) 두 단계로 나뉨

1️⃣ Render Phase (계산 단계) — "설계도 그리기"

• 컴포넌트 함수 호출
• JSX 반환
• 가상 DOM 생성
• 이전 가상 DOM과 비교

2️⃣ Commit Phase (적용 단계) — "실제 건설"

• 실제 DOM에 변경사항 반영
• 화면에 보여지는 순간

비유: 건축 공사
 - Render = 건축가가 설계도 그리기(머릿속으로만)
 - Commit = 인부들이 실제로 건물 짓기(눈에 보이는 결과)

---

(3) 언제 렌더링될까?

컴포넌트가 다시 렌더링되는 4가지 경우

 

1. 처음 화면에 나타날 때(최초 렌더링)

<App />		// 앱이 시작되면 한 번 렌더링

 

2. State가 바뀔 때

setCount(count + 1);	// → 리렌더링

 

3. Props가 바뀔 때

<UserCard name={newName} />		// name이 바뀌면 → 리렌더링

 

4. 부모가 렌더링될 때

fucntion Parent() {
  return (
    <div>
      <Child />		{/* 부모가 렌더링되면 자식도 같이! */}
    </div>
  );
}

중요: 부모가 렌더링되면 자식은 Props가 안 바뀌어도 리렌더링됨
성능 문제의 주요 원인이기도 함(나중에 최적화로 해결)

---

(4) Virtual DOM - 똑똑한 비서

---

(5) 배치 업데이트(Batching) - 영리한 모아 처리

---

(6) 렌더링 실제로 관찰해보기