useMemo와 useCallback

머리로 기억하려니 계속 헷갈려서 이번에 둘의 차이를 제대로 정리해보려고 한다.

들어가기에 앞서 메모이제이션에 대한 개념을 알아보자.

메모이제이션(Memoization)이란?
동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법이다.

useMemo는 메모이제이션 기법을 활용하여 함수의 값을 메모이제이션 하고,
useCallback은 함수를 메모이제이션 한다.

useMemo

useMemo는 함수의 결과값을 캐싱하여, 동일한 입력값에 대해 함수를 반복해서 실행하지 않도록 하는 훅이다.

주로 복잡한 연산이 필요한 컴포넌트에서 사용된다.

예시

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

todos와 tab의 변화가 있을 때만 useMemo가 재실행되며 결과값이 visibleTodos에 저장된다.

useCallback

useCallback은 함수 자체를 메모이제이션하기 위해 사용된다.
이를 통해 불필요한 함수 생성을 방지하여, 성능을 향상시킬 수 있다.

주로 콜백 함수를 props로 전달할 때 사용된다.

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

productId와 referrer의 변화가 있을 때만 useCallback이 재실행되며 콜백함수가 handleSubmit에 저장된다.

참고
React