TIL - useMemo와 useCallback

useMemo와 useCallback은 React에서 성능 최적화를 위해 사용되는 훅입니다. 이 둘은 각각 값을 캐싱하거나 함수를 메모이제이션하여 불필요한 재계산을 방지합니다.

 

useMemo: 이 훅은 계산 비용이 높은 값을 캐싱하고, 해당 값이 필요한 경우에만 다시 계산합니다. 이는 렌더링마다 동일한 계산을 반복하지 않고 성능을 향상시킵니다. 주로 렌더링 시마다 변경되지 않는 값이나 연산 결과를 캐싱하는 데 사용됩니다.

예를 들어, 복잡한 계산이나 배열의 필터링, 정렬과 같은 작업을 수행한 결과를 재사용하려는 경우에 useMemo를 사용할 수 있습니다.

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

 

useCallback: 이 훅은 함수를 메모이제이션하여 불필요한 함수 생성을 방지합니다. 이는 주로 자식 컴포넌트에 props로 전달되는 콜백 함수가 자식 컴포넌트가 리렌더링 될 때마다 새로 생성되어 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지하는 데 사용됩니다.

 

예를 들어, 자식 컴포넌트에 전달되는 콜백 함수가 종속성이 없는 경우, useCallback을 사용하여 해당 함수를 메모이제이션할 수 있습니다

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

 

두 훅은 모두 리렌더링 시마다 새로운 값을 계산하거나 새로운 함수를 정의하는 비용을 줄여주므로 성능 최적화에 유용합니다.

 

어떤 때에 useMemo와 useCallback을 사용하는가?

크게 두 가지 경우가 있습니다.

1. “정말로” 컴포넌트의 생애주기 또는 데이터 값의 변화에 따라 어떤 값을 업데이트하고 싶을 때
2. 리렌더링 될 때마다 새롭게 값을 계산하거나 새롭게 함수를 정의하는 것이 문제가 될 때
   1. 새로운 값의 계산이나 새로운 함수의 정의가 무거운 작업일 때
   2. 값의 참조값 또는 함수의 참조값을 유지하는 것이 중요할 때