React의 useCallback과 useMemo의 차이점과 사용 시 주의사항은?

useCallback과 useMemo는 React의 렌더링 최적화를 위한 Hook입니다. 둘 다 메모이제이션을 사용하지만, 메모이제이션 대상이 다릅니다.

useCallback은 함수 자체를 메모이제이션합니다. 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방지하여, 자식 컴포넌트에게 props로 전달되는 함수의 참조 동일성을 유지할 수 있습니다. 의존성 배열에 따라 함수 재생성 여부가 결정됩니다.

useMemo는 특정 값을 메모이제이션합니다. 복잡한 연산의 결과를 저장해두고, 의존성 배열이 변경되지 않는 한 저장된 값을 재사용하여 불필요한 연산을 줄입니다.

사용 시 주의사항은 불필요한 최적화를 피해야 한다는 점입니다. useCallback이나 useMemo를 과도하게 사용하면 오히려 코드가 복잡해지고 성능 저하를 유발할 수 있습니다. 또한, 의존성 배열을 정확하게 관리하지 않으면 예상치 못한 버그가 발생할 수 있습니다. 예를 들어, 의존성 배열에 필요한 값을 빠뜨리면 메모이제이션이 제대로 작동하지 않을 수 있습니다.