React 렌더링 흐름 완전정복 – 업데이트가 일어나는 순간

React 렌더링 흐름 완전정복 – 업데이트가 일어나는 순간

---

React를 사용하다 보면 이런 질문이 꼭 나옵니다.

“왜 컴포넌트가 자꾸 리렌더링 되죠?”
“어떤 조건에서 리렌더링이 발생하나요?”
“렌더링은 Virtual DOM이 한다는데 그게 뭔가요?”

이번 글에서는 React의 렌더링 흐름,
특히 렌더링이 발생하는 조건과 최적화 포인트를 자세히 설명합니다.
공식 문서를 바탕으로 실무에서 바로 적용할 수 있는 방식으로 풀어드릴게요.

---

🌀 React의 렌더링이란?

렌더링은 UI를 사용자에게 보여주기 위한 컴포넌트의 실행 과정입니다.

🔄 React 렌더링 흐름

1. 컴포넌트 함수 실행
↓
2. JSX → React 엘리먼트 생성
↓
3. Virtual DOM에 비교(Diffing)
↓
4. 실제 DOM에 반영

✅ React는 항상 Virtual DOM과 실제 DOM을 비교(Diffing)하여 필요한 부분만 바꿉니다.

---

📍 언제 리렌더링이 발생하는가?

반응형

React 컴포넌트는 다음 조건에서 다시 렌더링됩니다:

1. state가 변경되었을 때
2. props가 변경되었을 때
3. context 값이 변경되었을 때
4. 부모 컴포넌트가 리렌더링되었을 때

---

✅ 예시: state가 바뀌면 리렌더링

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

  return (
    <>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

setCount()를 호출하면 Counter() 함수 전체가 다시 실행됩니다.

---

⚠️ 불필요한 리렌더링 주의

function Parent() {
  const [name, setName] = useState("React");

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <Child />
    </>
  );
}

function Child() {
  console.log("👶 Child 렌더링");
  return <p>나는 자식 컴포넌트입니다</p>;
}

✅ name은 Parent의 state이지만, Child는 해당 state를 사용하지 않습니다.
그럼에도 불구하고 Parent가 리렌더링되면 Child도 함께 리렌더링됩니다.

→ 이런 상황에서는 React.memo를 사용하여 최적화할 수 있습니다.

---

🧠 React.memo로 리렌더링 줄이기

const Child = React.memo(() => {
  console.log("✅ 메모된 Child 렌더링");
  return <p>나는 자식 컴포넌트입니다</p>;
});

✅ props가 바뀌지 않으면, 리렌더링을 막을 수 있습니다.

---

🔬 렌더링의 핵심: 컴포넌트 함수는 "렌더링될 때마다" 호출된다

• useState, useEffect 등은 이 렌더링 흐름에 맞춰 동작합니다.
• 내부에서 조건문이나 루프를 사용하면 Hook 규칙에 위배될 수 있으니 주의!

---

🧪 실습 과제

1. useState로 만든 state가 바뀔 때 컴포넌트가 몇 번 렌더링되는지 console.log로 확인해보세요.
2. 자식 컴포넌트가 불필요하게 렌더링되지 않도록 React.memo를 적용해보세요.

---

🧠 오늘의 요약

개념 설명

렌더링	컴포넌트 함수 실행 → JSX → Virtual DOM → 실제 DOM
리렌더링 발생 조건	state, props, context 변경 또는 부모 리렌더링
최적화	React.memo, useMemo, useCallback 등 사용
주의사항	컴포넌트 함수는 렌더링될 때마다 실행됨

---

📌 다음 글 예고

👉 React의 상태(state)와 이벤트 핸들링 제대로 이해하기

• useState 구조와 상태 업데이트 흐름
• 함수 vs 객체 상태 다룰 때 주의할 점
• 이벤트 핸들러 작성 베스트 프랙티스

---