1️⃣ React에서 “렌더링(Rendering)”이란?

렌더링 = 컴포넌트 함수를 다시 실행시키는 것

React 컴포넌트는 사실 JavaScript 함수입니다.

따라서 렌더링은 단순하게 말하면:

function Component(props) {
  return <div>Hello</div>;
}

➡️ 이 함수를 다시 실행시키는 것을 의미합니다.

중요한 점은:

• 렌더링이 된다고 해서 항상 화면(DOM)이 다시 그려지는 것은 아니다.
• 렌더링 = Virtual DOM에서 재계산
• 실제 DOM 변경은 Diffing 이후 React가 필요하다고 판단할 때만 발생

2️⃣ React는 언제 렌더링을 발생시키는가?

아래 상황에서 컴포넌트가 리렌더링됩니다:

✔ 0. 최초 페이지 로딩(Initial Rendering)

✔ 1. 자식 컴포넌트가 props를 새로 받았을 때

✔ 2. state가 변경되었을 때

setCount(count + 1);

✔ 3. Context 값이 변경되었을 때

✔ 4. 부모 컴포넌트가 리렌더링되었을 때

➡️ 자식은 props가 안 변해도 기본적으로 리렌더링됨

➡️ (단, React.memo 사용 시 예외)

3️⃣ 부모가 리렌더링되면 자식도 리렌더링될까?

정답: Yes. 기본적으로 모두 리렌더링된다.

예시 구조:

Page
 ├─ A
 ├─ B
 └─ C

Page의 state가 변경되면:

• Page 렌더링
• A, B, C 모두 렌더링 (props 변화 여부와 관계 없음)

하지만…

🎯 “렌더링”이지, DOM 업데이트는 아님!

React는 Virtual DOM 레벨에서 계산 후

비교(Diffing)해서 실제 DOM에 변경이 필요한 경우에만 업데이트합니다.

4️⃣ 렌더링 과정 전체 흐름 (그림으로 이해)

🟦 1. 컴포넌트 함수 실행 (렌더링)
      ⬇
🟩 2. Virtual DOM 생성
      ⬇
🟧 3. 이전 Virtual DOM과 비교 (Diffing)
      ⬇
🟥 4. 실제 DOM 업데이트 (필요한 부분만)

📝 정리

• “렌더링”은 함수 실행
• “캠바디 DOM 변경”은 React가 필요하다고 판단할 때만 수행
• 그래서 실제 화면 변화는 최소화됨

5️⃣ 불필요한 렌더링을 막는 방법

⭐ 1. State를 필요한 컴포넌트로 옮기기 (State Colocation)

➡️ 최상단 state 때문의 불필요한 렌더링 방지

➡️ React 공식 권장 패턴

⭐ 2. React.memo()

props가 같으면 해당 컴포넌트 리렌더링 방지

const Child = React.memo(function Child({ value }) {
  return <div>{value}</div>;
});

⭐ 3. useCallback / useMemo

함수나 값을 메모이제이션하여 props 변경 방지 → 자식 리렌더 트리거 방지

⭐ 4. Context 남용 금지

Context값 변경 시 모든 구독 컴포넌트가 리렌더링됨

6️⃣ 예제로 보는 리렌더링 흐름

function Page() {
  const [count, setCount] = useState(0);
 
  return (
    <><A count={count} />
      <B />
      <C />
    </>
  );
}

여기서 setCount가 호출되면:

➡️ 왜 B와 C도?

부모가 렌더 → 자식도 기본적으로 렌더

하지만 실제 DOM 업데이트는?

• Page: 변경
• A: 변경
• B, C: 화면 변화 없음 → Virtual DOM에서만 계산 후 스킵됨

7️⃣ 결론

React 렌더링의 핵심은 다음 네 가지입니다:

🚀 1. “렌더링” = 컴포넌트를 다시 실행하는 것

🚀 2. state/props/context/부모 변경 → 렌더링 발생

🚀 3. 렌더링 ≠ DOM 업데이트

Virtual DOM → Diffing → 필요한 DOM만 변경

🚀 4. 불필요한 렌더를 줄이려면

• state 위치 최적화(State Colocation)
• React.memo
• useMemo/useCallback