React에서 useMemo와 useCallback은 둘 다 성능 최적화를 위한 Hook입니다. 그러나 각각의 사용 시점과 목적이 다릅니다.
useMemo
계산 비용이 높은 함수의 결과 값을 기억하고, 이전에 계산한 결과 값을 재사용할 수 있도록 합니다. 이 Hook은 함수형 컴포넌트에서 사용됩니다. 이전에 계산된 값과 현재 값이 동일하다면, 이전에 계산된 값을 반환합니다. 그러나 이전에 계산된 값과 현재 값이 다르다면, 새로운 값을 계산하고 반환합니다.
ex) 코드 예시
const result = useMemo(() => expensiveOperation(dep1, dep2), [dep1, dep2]);
이 코드에서 expensiveOperation 함수는 계산 비용이 많이 드는 함수입니다. dep1과 dep2가 변경되었을 때만 expensiveOperation 함수를 호출하고, 그렇지 않으면 이전에 계산한 값을 반환합니다.
useCallback
콜백 함수를 기억하고, 이전에 생성한 함수를 재사용할 수 있도록 합니다. 이 Hook은 함수형 컴포넌트에서 사용됩니다. 이전에 생성된 함수와 현재 생성된 함수가 동일하다면, 이전에 생성된 함수를 반환합니다. 그러나 이전에 생성된 함수와 현재 생성된 함수가 다르다면, 새로운 함수를 생성하고 반환합니다.
ex) 코드 예시
const handleClick = useCallback(() => {
doSomething(dep1, dep2);
}, [dep1, dep2]);
이 코드에서 handleClick 함수는 doSomething 함수를 호출합니다. dep1과 dep2가 변경되었을 때만 새로운 handleClick 함수를 생성하고, 그렇지 않으면 이전에 생성된 함수를 반환합니다.
따라서, useMemo는 계산 비용이 많이 드는 함수의 결과 값을 기억하고 재사용할 때 사용하며, useCallback은 콜백 함수를 기억하고 재사용할 때 사용합니다.
