170. useMemo()로 최적화하기

 

 

useMemo를 useCallback보다 덜 자주 쓰게 될 것이다

 

데이터를 기억하는 것이 더 

※ useMemo를 이용하여 데이터를 저장하면 이는 메모리를 사용하는 것이다.

 

그렇다면 useMemo와 useCallback의 차이는.....?

useMemo:

• useMemo는 계산 비용이 큰 함수의 결과 값을 메모이제이션하는 데 사용됩니다.
• useMemo(callback, dependencies) 형태로 사용되며, callback 함수를 실행한 결과 값을 기억합니다.
• dependencies 배열은 useMemo의 재계산을 트리거하는 의존성 목록입니다. 의존성이 변경되지 않는 한 이전에 계산한 결과를 재사용합니다.
• useMemo는 불필요한 계산을 방지하고 성능을 향상시킬 수 있습니다.
• 주로 계산 비용이 많이 드는 연산, 복잡한 계산 결과, 또는 렌더링과는 관련 없는 값을 메모이제이션할 때 사용됩니다.

useCallback:

• useCallback은 콜백 함수를 메모이제이션하는 데 사용됩니다.
• useCallback(callback, dependencies) 형태로 사용되며, callback 함수를 메모이제이션합니다.
• dependencies 배열은 useCallback의 재생성을 트리거하는 의존성 목록입니다. 의존성이 변경되지 않는 한 이전에 메모이제이션한 콜백을 재사용합니다.
• useCallback은 자식 컴포넌트로 전달되는 콜백 함수를 메모이제이션하여 자식 컴포넌트들이 불필요하게 다시 렌더링되지 않도록 도와줍니다.
• 주로 부모 컴포넌트가 자식 컴포넌트로 콜백 함수를 전달할 때 사용되며, 의존성이 변경되지 않는 한 같은 콜백 함수를 재사용할 수 있습니다.

요약하자면, useMemo는 계산 비용이 큰 값을 메모이제이션하는 데 사용되고, useCallback은 콜백 함수를 메모이제이션하여 불필요한 렌더링을 방지하는 데 사용됩니다.

 

둘 다 비슷하나 useCallback은 반환한다는 차이가 있는 건가...!