[React] useMemo와 useCallback

useMemo와 useCallback은 React의 훅으로, 각각 계산된 값과 함수의 메모이제이션을 도와줍니다.

둘 다 성능 최적화에 사용되지만, 그 목적과 사용 방법이 다릅니다.

 

useMemo

• 목적 : 계산된 값을 메모이제이션하여 불필요한 재계산을 방지합니다.
• 사용법 : 계산이 필요한 값을 반환하는 함수를 인자로 받고, 그 값이 변경되지 않는 한 메모이제이션된 값을 반환합니다.

const computedValue = useMemo(() => {
  return expensiveCalculation(someValue);
}, [someValue]);

여기서 expensiveCalculation은 someValue가 변경될 때만 다시 계산됩니다.

 

useCallback

• 목적 : 함수를 메모이제이션하여 함수가 새로 생성되는 것을 방지합니다.
• 사용법 : 함수를 반환하는 함수를 인자로 받고, 함수가 의존성 배열의 값이 변경되지 않는 한 동일한 함수 인스턴스를 반환합니다.

const handleClick = useCallback(() => {
  // 이벤트 핸들링 코드
}, [dependency]);

여기서 handleClick 함수는 dependency가 변경될 때만 새로 생성됩니다.

 

주요 차이점

• useMemo는 계산된 값을 캐시하여, 그 값이 의존성 배열의 값이 변경되지 않는 한 다시 계산하지 않습니다.
• useCallback은 함수 인스턴스를 캐시하여, 그 함수가 의존성 배열의 값이 변경되지 않는 한 새로 생성하지 않습니다.

 

결론

• useMemo: 계산된 결과를 캐시하여 재사용합니다.
• useCallback: 함수 자체를 캐시하여 불필요한 함수 재생성을 방지합니다.