C
React 목록
이전19 / 22다음
React/최적화/Lesson 19

React.memo

30분·theory
이 챕터
2/2
JavaScript

React.memo

💡 왜 배워야 할까요?

🎯 불필요한 리렌더링을 막아서 앱의 속도를 빠르게 합니다.
💼 리스트에서 수천 개 아이템을 렌더링할 때 성능 차이가 극적입니다.
⚡ 면접에서 성능 최적화 질문의 단골 답변입니다.
🔗 실무에서 성능 문제 해결의 첫 번째 도구입니다.
🏢 실무에서는
실무에서는 검색 결과 리스트, 무한 스크롤 피드, 실시간 알림 같은 자주 업데이트되는 화면에서 React.memo를 사용합니다. 예를 들어 네이버 검색에서 검색어를 입력할 때마다 전체 결과 리스트가 리렌더링되지 않도록 각 검색 결과 아이템을 React.memo로 감싸서 성능을 유지합니다.

React.memo란?

React.memo

Props가 변경되지 않으면 리렌더링을 건너뛰는 고차 컴포넌트(HOC)입니다.

언제 사용?

  • ▸부모가 자주 리렌더링되지만 자식 props는 안 변할 때
  • ▸렌더링 비용이 큰 컴포넌트
  • ▸리스트의 개별 아이템

React 19 변화

React Compiler가 자동으로 memo를 적용하므로 수동 사용이 줄어듭니다.

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

💻 React.memo 실습 
import { memo, useState, useCallback } from "react";

// 1. 기본 memo
const ExpensiveChart = memo(function ExpensiveChart({ data }: { data: number[] }) {
  console.log("Chart 렌더링!"); // props 변경 시에만 출력
  return (
    <div className="h-64 bg-gray-800 rounded p-4">
      {data.map((v, i) => (
        <div key={i} className="inline-block bg-green-500 mx-0.5"
          style={{ height: `${v}%`, width: 20 }} />
      ))}
    </div>
  );
});

// 2. 커스텀 비교 함수
const UserCard = memo(
  function UserCard({ user }: { user: { id: string; name: string; avatar: string } }) {
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id; // ID만 비교
  }
);

// 3. 부모 컴포넌트
function Dashboard() {
  const [count, setCount] = useState(0);
  const [chartData] = useState([20, 40, 60, 80, 50, 30, 70]);

  // useCallback으로 함수 참조 안정화
  const handleChartClick = useCallback(() => {
    console.log("차트 클릭");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      {/* count 변경 시 차트는 리렌더링되지 않음 */}
      <ExpensiveChart data={chartData} />
    </div>
  );
}

💡 💡 React.memo 팁

  • ▸React 19: Compiler 자동 처리 → 수동 memo 줄이기
  • ▸객체/배열 Props: useMemo로 참조 안정화 필요
  • ▸콜백 Props: useCallback으로 함수 참조 안정화
  • ▸측정: React DevTools Profiler로 실제 효과 확인

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — React.memo

React.memo을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.
1 🧩 1. React.memo 사용 시나리오
이 기능이 필요한 상황.
↓
2 💻 2. 코드 작성
React.memo의 기본 사용법.
↓
3 🎨 3. 렌더링 결과
사용자가 보는 화면.
↓
4 💡 4. 실무 팁
흔한 함정과 베스트 프랙티스.

🎮 React.memo — 단계별 이해

각 단계를 클릭해 내용을 읽고 ✓ 이해했어요 버튼으로 진행률을 확인하세요.
🖥️ 실행 결과 — 렌더링된 React 컴포넌트
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

React.memo는 어떻게 리렌더링을 방지하나요?
💡 React.memo는 HOC로 컴포넌트를 감싸면 props가 바뀌지 않으면 이전 렌더링 결과를 재사용해요. 부모 리렌더링 시 자식의 불필요한 리렌더링을 방지해요. 얕은 비교라 객체/함수 props엔 useMemo/useCallback과 함께 사용해요.
먼저 읽으면 좋은 개념: useTransition / useDeferredValue
다음 추천: Error Boundary + Suspense
이전목록다음
React.memo / useMemo / useCallback - React