메모이제이션(memoization)이란?

useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해 간단히 설명한다.
memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 어플리케이션의 성능을 최적화 할 수 있다.

useMemo

- 메모이제이션된 '값' 을 반환한다.

useMemo(()=> fn, deps)

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

간단한 예를 들면

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

이 예제에서 deps는 [A]이다.
따라서 A가 변하면 ()=> {consolg.log(ex)} 가 실행된다.

useCallback

- 메모이제이션된 '함수' 를 반환한다.

useMemo는 함수를 실행하지만 useCallback은 함수를 반환한다.

useCallback(fn,deps)

useCallback 은 deps가 변하면 fn 이라는 새로운!! 함수를 반환한다.

예를 들면

const useCallbackReturn = useCallback(() => {console.log(ex)}, [A])

이 예시의 진행순서는

• 처음 컴포넌트가 시작될때 ()=> {console.log(0)} 실행
• A 가 변할 때까지 함수는 ()=>{console.log(0)}
• A 가 변한다면 그때 ex의 값을 가져와서 ()=> {console.log(ex)}로 바뀜

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

useCallback의 새로고침

useCallback은 deps가 변하면서 함수를 반환할 때, 형태가 같더라도 아예 새로운 함수를 반환한다.

const ex1 = () => {};
const ex2 = () => {};

위 두 함수는 다르다.

각 변수는 같은 함수를 바라볼 뿐 전혀 다른 변수이다.
바라보는 값만 같을 뿐이고 전혀 다른 메모리를 가진 변수이다.

const useCallbackReturn = useCallback(() => {console.log(ex)}, [A])

여기서 A의 값이 변할 때, useCallback은 새로운 함수를 반환한다.
풀어서 얘기하자면 ex == 0 과 ex == 1 의()=>{} 은 다른 함수이다.
새로운 무기명 함수를 반환했기 때문이며 값은 같겠지만 다른 메모리를 사용한다.