React 성능 최적화: React.memo

핵심 개념

React.memo는 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않는 고차 컴포넌트입니다. 부모가 리렌더링될 때 자식의 불필요한 렌더링을 방지합니다. 참조 타입 props는 useCallback/useMemo와 함께 사용해야 합니다. React.memo를 지우며 렌더링이 어떻게 증가하는지 확인하십시오.

코드 분석

REACT📋 코드 (32줄)







const { useState, memo } = React;

  let renderCount = 0;

  const ExpensiveUnit = memo(function ExpensiveUnit({ model }) {
    renderCount++;
    return (
      <div style={{color:'#888', fontSize:'12px', marginBottom:'4px'}}>
        [{model}] 렌더링 횟수: {renderCount}
      </div>
    );
  });

  function App() {
    const [tick, setTick] = useState(0);
    return (
      <div>
        <button onClick={() => setTick(t => t + 1)} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace', marginBottom:'12px'}}>PARENT RE-RENDER ({tick})</button>
        <ExpensiveUnit model='T-800' />
        <ExpensiveUnit model='T-1000' />
        <div style={{color:'#333', fontSize:'11px', marginTop:'8px'}}>memo 덕분에 props 미변경 시 리렌더링 안됨</div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '성능 최적화' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'성능 최적화'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '성능 최적화' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '성능 최적화' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React 성능 최적화: React.memo는 이 3가지만 확실히 잡으세요

1.부모가 리렌더링될 때마다 변경 없는 자식까지 전부 다시 그리면 리스트가 수백 개일 때 눈에 띄게 느려집니다

2.React.memo는 props가 동일하면 이전 렌더링 결과를 재사용하며, useMemo·useCallback과 함께 써야 효과가 극대화됩니다

3.다음 챕터에서 실전 구현 파트로 넘어가 검색 필터를 직접 만들어봅니다

💬 이 챕터 질문 보기

REACT · CH.19 — 질문하거나 답변을 확인하세요

→

진행도 19 / 34

← 커리큘럼으로 ← 목록으로 (React)