컴포넌트 성능 최적화 – memo, useMemo, useCallback 총정리

컴포넌트 성능 최적화 – memo, useMemo, useCallback 총정리

---

React 앱의 규모가 커지거나 렌더링이 많아지면,
불필요한 렌더링이 성능 저하로 이어질 수 있습니다.

이런 상황에서 React가 제공하는 성능 최적화 도구인
**React.memo, useMemo, useCallback**를 적절히 사용하면
렌더링 횟수를 줄이고 속도는 높이고 사용자 경험을 향상시킬 수 있습니다.

이번 글에서는 이 세 가지의 차이점과 실전 사용법을 예제와 함께 명확하게 설명합니다.

---

✅ React 성능 최적화가 필요한 순간

• 리스트 항목이 많을 때
• 컴포넌트 안에서 무거운 계산이 있을 때
• 부모 컴포넌트가 자주 리렌더링될 때
• 이벤트 핸들러가 자주 재생성될 때

---

🔹 React.memo – 컴포넌트를 메모이제이션

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

✅ 기본 사용법

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

✅ 사용 예

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child name="React" />
    </>
  );
}

✅ Parent가 리렌더링되어도 Child의 props가 변하지 않으면 Child는 리렌더링되지 않음

---

🔹 useMemo – 계산 비용이 큰 값을 캐싱

반응형

useMemo는 무거운 계산 결과를 메모이제이션하여
렌더링 때마다 재계산하지 않도록 합니다.

✅ 기본 사용법

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(count);
}, [count]);

→ count가 바뀔 때만 computeExpensiveValue가 실행됨

---

✅ 실전 예: 느린 계산 최적화

function ExpensiveComponent({ num }) {
  const slowResult = useMemo(() => {
    console.log("🧮 계산 중...");
    let result = 0;
    for (let i = 0; i < 1e7; i++) result += num;
    return result;
  }, [num]);

  return <p>계산 결과: {slowResult}</p>;
}

---

🔹 useCallback – 함수 재생성 방지

컴포넌트가 리렌더링될 때마다 함수도 다시 생성됩니다.
이때 useCallback을 사용하면 동일한 참조를 유지할 수 있습니다.

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

✅ 특히 React.memo된 자식 컴포넌트에 함수를 props로 넘길 때 필수

---

✅ 예제: memo + useCallback 조합

const Button = React.memo(function Button({ onClick }) {
  console.log("🔘 버튼 렌더링");
  return <button onClick={onClick}>클릭</button>;
});

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

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

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

✅ handleClick의 참조가 바뀌지 않아서 Button은 리렌더링되지 않음!

---

🧠 언제 사용해야 할까?

Hook 사용 조건

React.memo	컴포넌트가 동일한 props로 자주 렌더링될 때
useMemo	계산이 무거운 값을 렌더링마다 반복 생성하지 않게 할 때
useCallback	함수 props의 참조를 유지해야 할 때 (특히 memo와 함께)

---

⚠️ 오남용 주의!

• 모든 컴포넌트에 React.memo를 붙이면 오히려 성능 저하 가능
• useMemo, useCallback은 필요할 때만 사용 → 복잡도 증가

✅ 성능이 문제될 정도로 렌더링이 많은 경우에만 적용

---

🧪 실습 과제

1. React.memo로 자식 컴포넌트의 렌더링을 최적화해보세요
2. 무거운 계산이 있는 함수에 useMemo를 적용해보세요
3. 자식 컴포넌트에 전달되는 콜백 함수에 useCallback을 적용해보세요

---

📌 다음 글 예고

👉 React 앱 구조 설계 Best Practice – Atomic Design 적용법

• 폴더 구조 어떻게 짜야 할까?
• 재사용 가능한 UI 컴포넌트 계층 구조
• 실무에서 자주 쓰는 설계 패턴 정리

---

 

React 성능 최적화, React.memo 사용법, useMemo 예제, useCallback 이해, 컴포넌트 리렌더링 최적화, React 함수 참조 최적화, React 렌더링 성능, 메모이제이션, React 성능 개선 팁, React 리렌더링 방지