useMemo & useCallback 해부: 최적화 시스템

핵심 개념

useMemo는 계산 결과를 메모이제이션하고, useCallback은 함수를 메모이제이션합니다. 의존성이 변경될 때만 재계산합니다. 불필요한 리렌더링을 방지하는 최적화 도구입니다. 각 Hook을 지우며 성능 최적화가 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (32줄)







const { useState, useMemo, useCallback } = React;

  function ThreatAnalyzer() {
    const [units, setUnits] = useState([8, 10, 9, 6, 7]);
    const [filter, setFilter] = useState(0);

    const highThreat = useMemo(() => {
      console.log('재계산 실행');
      return units.filter(u => u >= filter);
    }, [units, filter]);

    const addUnit = useCallback(() => {
      setUnits(prev => [...prev, Math.floor(Math.random() * 5) + 6]);
    }, []);

    return (
      <div>
        <div style={{color:'#10b981', marginBottom:'8px'}}>위협도 {filter} 이상: [{highThreat.join(', ')}]</div>
        <input type='range' min='0' max='10' value={filter} onChange={e => setFilter(Number(e.target.value))} style={{width:'100%', marginBottom:'8px'}} />
        <div style={{color:'#888', fontSize:'12px', marginBottom:'8px'}}>필터: {filter}</div>
        <button onClick={addUnit} style={{background:'#333', color:'#e8e8e8', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>ADD UNIT</button>
      </div>
    );
  }

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

AI 프롬프트

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

Claude

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

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

ChatGPT

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

'useMemo & useCallback'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

useMemo & useCallback 해부: 최적화 시스템은 이 3가지만 확실히 잡으세요

1.리렌더링마다 무거운 계산이 반복되거나 자식에게 매번 새 함수를 전달하면 성능이 불필요하게 저하됩니다

2.useMemo는 계산 결과를 캐시하고, useCallback은 함수 참조를 캐시합니다 — 둘 다 의존성이 바뀔 때만 재생성됩니다

3.다음 챕터에서 여러 Hook을 묶어 재사용 가능한 단위로 추출하는 커스텀 Hook을 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 11 / 34

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