useCallback과 useMemo는 각각 어떤 상황에서 사용하는가?

useCallback은 함수 객체 자체를 재사용할 때 쓰고, useMemo는 계산된 결과 값을 재사용할 때 사용한다.

useCallback은 자식 컴포넌트에 함수를 전달할 때 주로 쓴다. 컴포넌트가 리렌더링되면 내부 함수도 새로 만들어진다. 자식 컴포넌트가 React.memo를 써도 전달받는 함수의 참조가 바뀌면 다시 그려진다.

useMemo는 실행 비용이 큰 연산 결과를 보존할 때 쓴다. 렌더링마다 매번 수행할 필요가 없는 복잡한 계산을 방지한다. 의존성 배열의 값이 바뀌지 않으면 이전 연산 결과를 그대로 가져온다.

두 훅 모두 메모이제이션 비용이 발생한다. 단순한 연산이나 자식 컴포넌트 전달이 없는 곳에 남발하면 오히려 메모리를 더 쓴다.