📘 리액트 강의 12편 - 성능 최적화 전략 (React.memo, useMemo, useCallback)

React는 기본적으로 렌더링이 매우 빠릅니다. 하지만 컴포넌트가 많아지고, 상태 변화가 많아지면 불필요한 렌더링이 발생할 수 있습니다.
이 강의에서는 리액트 성능 최적화를 위한 3가지 핵심 도구를 배웁니다.

---

1. 불필요한 렌더링이란?

<Parent>
  <Child />
</Parent>

부모 컴포넌트가 렌더링되면 기본적으로 자식도 함께 렌더링됩니다.
→ 데이터가 바뀌지 않아도 다시 그려지면 성능 낭비 발생 😢

---

2. React.memo - 컴포넌트 메모이제이션

React.memo는 props가 바뀌지 않았다면 리렌더링을 막아주는 고차 컴포넌트입니다.

const Child = React.memo(({ name }) => {
  console.log("Child 렌더링");
  return <div>{name}</div>;
});

---

3. useCallback - 함수를 메모이제이션

useCallback은 컴포넌트 내부의 함수를 의존성이 바뀔 때만 새로 생성합니다.

const handleClick = useCallback(() => {
  console.log("클릭!");
}, []);

→ props로 넘기는 함수가 매번 새로 만들어지면 React.memo가 무용지물이 되기 때문에 필수!

---

4. useMemo - 연산 결과를 메모이제이션

무거운 계산 로직을 매 렌더링마다 하지 않도록 값 자체를 캐싱합니다.

const expensiveValue = useMemo(() => {
  return calculateHeavyStuff(data);
}, [data]);

---

5. 예제: 렌더링 최적화 실습

---

📄 Child.js

const Child = React.memo(({ onClick }) => {
  console.log("🔁 Child 렌더링");
  return <button onClick={onClick}>자식 버튼</button>;
});

export default Child;

---

📄 App.js

import { useState, useCallback } from "react";
import Child from "./Child";

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

  const handleChildClick = useCallback(() => {
    console.log("자식 버튼 클릭");
  }, []);

  return (
    <div>
      <h1>성능 최적화 예제</h1>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+ 증가</button>
      <Child onClick={handleChildClick} />
    </div>
  );
}

export default App;

✅ 결과

• count만 증가할 때 Child는 렌더링되지 않음!
• 성능 최적화 성공! 🎉

---

마무리 정리

도구 역할

React.memo	컴포넌트 리렌더링 방지
useCallback	함수 재생성 방지
useMemo	값 재계산 방지 (무거운 연산용)