useMemo vs useCallback

useMemo와 useCallback은 둘 다 React에서 제공하는 Hook들로, 컴포넌트의 성능 최적화를 돕는데 사용됩니다.

useMemo: 이 Hook은 메모이제이션된 값을 반환합니다. 이는 복잡한 함수의 결과 값을 재사용하려고 할 때 유용합니다. 함수의 결과 값이 같은 입력에 대해 항상 동일하다면 (즉, 순수 함수이다면), useMemo를 사용하여 이전에 계산된 값을 재사용하여 불필요한 계산을 줄일 수 있습니다. 이는 성능에 큰 영향을 미칠 수 있는 복잡한 계산에 특히 유용합니다.

 

useCallback: 이 Hook은 메모이제이션된 콜백을 반환합니다. useCallback이 반환하는 콜백은 그 의존성 배열에 있는 값이 변경되지 않는 한 동일하게 유지됩니다. 이는 불필요한 리렌더링을 피하려고 할 때 유용합니다. 예를 들어, 만약 콜백이 변한다면 그것을 props로 받는 컴포넌트가 불필요하게 리렌더링 될 수 있습니다. useCallback은 이러한 불필요한 리렌더링을 방지하는 데 도움을 줍니다.

이 두 Hook은 공통적으로 "의존성 배열"을 인자로 받습니다. 이 배열의 값들이 변하지 않는 한, Hook은 이전에 반환된 값을 재사용합니다. 이 배열의 값들 중 하나라도 변하면, Hook은 새 값을 계산하거나 새 콜백을 생성합니다. 이 두 Hook 모두 성능 최적화에 있어서 중요한 도구들이지만, 그들의 사용은 신중해야 합니다. 불필요하게 사용하면 오히려 성능을 저하시킬 수 있습니다. 그러므로, 이러한 Hook들은 반드시 필요한 경우에만 사용해야 합니다.

 

무슨 차이가 있는걸까?

 

useMemo와 useCallback은 둘 다 메모이제이션(memoization)을 위한 React Hook입니다. 메모이제이션은 고비용의 연산을 반복해서 실행하는 대신 이전의 결과를 재사용하는 기술입니다. 그러나 이 두 Hooks는 사용 목적에 따라 분명한 차이가 있습니다.

useMemo: 이 Hook은 메모이제이션된 값을 반환합니다. 즉, 어떤 함수의 반환 값을 기억하고, 의존성 배열의 값이 변경될 때만 이 값을 다시 계산합니다. 이로 인해 고비용의 연산이 필요할 때 이를 최적화할 수 있습니다.

useCallback: 이 Hook은 메모이제이션된 함수 자체를 반환합니다. 즉, 함수 자체를 기억하고, 의존성 배열의 값이 변경될 때만 이 함수를 다시 생성합니다. 이 Hook는 이벤트 핸들러와 같은 콜백 함수를 최적화하는 데 주로 사용됩니다

.결국, useMemo는 연산된 결과값을 재사용하고, useCallback은 함수 자체를 재사용합니다. 이 두 Hooks는 불필요한 재연산이나 재생성을 피함으로써 성능을 개선하는 데 도움이 됩니다. 이 두가지는 공통적으로 의존성 배열을 사용하여 언제 메모이제이션된 값이나 함수를 재계산 또는 재생성할지를 결정합니다.