TUTORIAL

React 메모이제이션

useMemo와 useCallback 최적화

럿지 AI 팀
2025-01-15
15분
불필요한 재렌더링 방지
useMemo

값 메모이제이션

useCallback

함수 메모이제이션

React.memo

컴포넌트 메모

useMemo vs useCallback

useMemo
계산된 값

비싼 계산 캐싱

useCallback
메모된 함수

자식 props 안정화

언제 사용할까?

사용 O

  • • 비싼 계산
  • • 자식 컴포넌트 props
  • • deps 배열 의존성

사용 X

  • • 단순한 계산
  • • 모든 함수에
  • • 과도한 최적화

의존성 배열

useMemo(() => expensive(a, b), [a, b])

a 또는 b가 변경될 때만 재계산

핵심 원칙

측정 먼저, 최적화는 나중에!
실제로 성능 문제가 있을 때만 메모이제이션 적용

관련 태그

#react
#Tutorial
#Frontend
#Development