[리액트] 컴포넌트 최적화 (useMeno, useCallback)

journey·2025년 7월 14일

useMemo
에서 memo는 Memoization

동일한 값을 리턴하는 함수를 반복적으로 리턴해야할 때,
맨 처음 계산한 값을 처음에 메모리에 저장해서 필요할때 마다 다시 계산하지 않고 메모리에서 꺼내 재사용하는 기법

  • 함수형 컴포넌트
    렌더링-> 컴포넌트 함수 호출 -> 모든 내부 변수 초기화

useMemo는 두개의 인자를 받음

const value = useMemo(() => {
	return calculate();
}, [item]);
  1. 콜백함수: 메모이제이션할 값을 계산해서 리턴해 주는 함수
  2. 배열: 의존성배열 안의 요소의 값이 업데이트 될 때만 메모이제이션 된 값을 다시 메모이제이션 업데이트

useCallback

profile
개발 여정

0개의 댓글