유사해보이는 hooks차이 useCallback 과 useMemo 차이!

useCallback과 useMemo는 모두 React에서 컴포넌트의 성능을 최적화하는 데 사용되는 훅입니다. 하지만 두 훅은 서로 다른 목적을 가지고 있습니다.

useCallback은 함수 자체를 캐싱하는 데 사용되며, 같은 함수가 계속해서 재생성되는 상황을 방지할 수 있습니다. 이는 자식 컴포넌트에 props로 전달될 때 매번 새로운 함수를 생성하는 것을 방지하고, 자식 컴포넌트의 불필요한 렌더링을 방지하는 데에 효과적입니다.

예를 들어, 자식 컴포넌트에 props로 전달되는 함수가 매번 재생성될 때마다 자식 컴포넌트가 불필요하게 렌더링된다면 useCallback을 사용하여 함수를 캐싱하여 불필요한 렌더링을 방지할 수 있습니다.

 

useMemo는 계산 결과 값을 캐싱하는 데 사용되며, 복잡한 계산이 필요한 상황에서 성능을 최적화하는 데에 효과적입니다. useMemo를 사용하여 계산 결과 값을 캐싱하면, 같은 계산이 반복되지 않아도 캐시된 값을 사용할 수 있습니다.

 

 

캐싱이란? 값을 저장한다는 의미일까??

맞습니다. useCallback과 useMemo 모두 계산된 결과 값을 캐싱하여, 같은 계산이 반복되는 상황에서 성능을 최적화합니다.

useCallback은 함수 자체를 캐싱하는 데 사용되며, useMemo는 계산된 결과 값을 캐싱하는 데 사용됩니다. useCallback의 경우 함수를 캐싱하여 같은 함수가 매번 재생성되지 않도록 하고, useMemo는 계산된 결과 값을 캐싱하여 같은 계산이 반복되지 않도록 합니다.

이러한 캐싱된 값은 메모리에 저장됩니다. 따라서, useCallback과 useMemo를 사용하여 성능을 최적화할 때는 적절한 캐시 키를 사용하여 값의 일관성을 유지하도록 해야 합니다.