useMemo, useCallback들은 컴포넌트를 최적화하기 위해서 사용한다
둘다 메모이제이션에 저장된 값을 반환한다.
메모이제이션이란 동일한 값을 가진 함수를 반복적으로 호출해야 된다면
처음 랜더링될때 그 값을 캐싱하고 그 값을 필요로할때
이전의 값을 캐싱한 값을 꺼내서 재사용하는 최적화하는 방법이다.
useEffect처럼 의존성 배열안의 값이 변경되지 않는이상
메모이제이션의 값은 변경되지 않는다.
차이점은 useMemo는 값을 리턴, useCallback은 함수 자체를 리턴한다.
useMemo
const add = useMemo(() => {
return ~~
}, [dependencyArray])
useMemo는 2개의 인자를 받는다
첫번째는 메모이제이션할 값
두번째는 의존성 배열(dependencyArray)
hardNumber, easyNumber는 1의 값을 가지고 있다.
hardSum, hardEasy에는 컴포넌트 밖에 있는 함수를 대입했고
hardSum에 대입된 hardCalculate는 99999999의 반복문을 실행하는 무거운 작업을 실행한다.
easySum에 대입된 easyCalculate는 가벼운 작업이기 때문에 바로 바로 동작한다.
함수형 컴포넌트는 state의 값이 변경되면 재 호출 되기때문에 컴포넌트안의 변수들의 값이
초기화 된다. 결국 다른 state의 값이 변경되도 hardCalculate라는 함수가 호출되면
무거운 작업을 또 실행하고 그러면 사이트가 굉장히 느려질것이다.
그것을 최적화하기 위해서 useMemo를 사용해서 웹사이트가 첫랜더링될때
메모이제이션에 그 값을 저장하고 의존성 배열에있는 값이 변경될경우에만 다시 호출되도록
즉 다른 작업을 실행할때는 실행되지 않도록 하는것이다.
결국 위에서 hardNumber의 값이 변경될경우에만 리턴의 값이 출력되기에
그 외의 값이 변경될때는 무거운 작업을 실행하지 않아도 된다.
useCallback
const add = useCallback(() => {
return ~~
}, [dependencyArray])
useCallback은 2개의 인자를 받는다
첫번째는 메모이제이션할 콜백함수
두번째는 의존성 배열(dependencyArray)
아래의
useEffect의 의존성 배열에 testFunction함수를 대입해서
testFunction함수가 변경될때만 실행 하도록 하고
input안의 값이 변경되면 state값이 변경된다.
그런데 input의 값이 변경이되면 useEffect가 실행된다
useEffect의 의존성 배열에는 없는값이 변경됐는데도 실행되는 이유는?
그 이유는 state값이 변경되면 컴포넌트가 재랜더링되고
결국 재랜더링이되면 함수형 컴포넌트인 App 컴포넌트가 호출되고
App 컴포넌트가 호출되면 모든 변수들은 다시 초기화가 된다.
결국 testFunction은 변수이면서 객체이기때문에 초기화가 된다.
그런데 객체는 변수보다 더 많은 데이터를 저장하기 때문에
값을 그대로 저장하지않고 그 값을 가지고있는 주소를 나타낸다.
결국 다시 랜더링이 되면 다른 주소를 가지고있기 때문에
useEffect는 값이 변경됐다고 생각하고 실행하기 때문이다.
useCallback을 사용해서 메모이제이션의 값을 사용하고
의존성 배열안의 값이 변경될경우만 다시 호출되도록 했다.
testFunction을 useCallback에 담아서 값을 캐싱하고
의존성배열에 test라는 값이 변경될때만
testFunction이 다시 호출된다.
