[React] useMemo와 useCallback 차이

useMemo와 useCallback는 메모이제이션 된 값을 반환한다.
useCallback는 함수를 메모이제이션하고 useMemo는 값을 메모이제이션한다

메모이제이션,memoization

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술.
즉, 기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.
적절히 사용하면 중복연산을 피할 수 있기에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다.

useMemo

값을 반환한다

useMemo(() => fn, deps)

useMemo는 deps가 변환한다면 () => fn 이라는 함수를 실행, 그 함수의 반환 값을 반환한다.
deps 는 dependency이며, useMemo가 이 deps라는 것에 '의존'한다는 뜻

useMemo(() => {console.log(ex)}, [ex]) 

deps는 [ex]
ex가 변할 때만 ()=>{console.log(ex)}가 실행된다.

useCallback

함수를 반환한다.

useCallback(fn, deps)

deps가 변한다면 fn 이라는 새로운 함수를 반환한다

useCallback은 함수와 상관 없는 상태값이 변할 때,
함수 컴포넌트에서 불필요하게 함수를 업데이트 하는 것을 방지해준다

useMemo((...)=>fn, deps) === useCallback(fn, deps)

참고
참고영상
참고