메모이제이션(memoization)이란?
useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 짚어보면 memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장! 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻함.
memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 좀 더 쓰더라도 앱의 성능을 최적화 시킬 수 있다.
1. useMemo
ex) 사용법
useMemo(()=> fn, deps)const [ex, setEx] = useState(0);
const [why, setWhy] = useState(0);
// useMemo 사용하기
useMemo(() => {console.log(ex)}, [ex]);
return (
<>
<button onClick={() => setEx((prev) => (prev + 1))}>X</button>
</>
);이 예시의 useMemo는
useMemo(() => {console.log(ex)}, [ex]);에서 deps는 [ex] 이다.
ex가 변할 때에만 ()=> {console.log(ex)}이 실행된다.
다른 변경 사항이 있더라도 ex 값이 변하지 않으면 useMemo에는 아무런 변화가 없다.
2. useCallback
useMemo와의 차이점은 useMemo는 예전시점의 값을 반환, useCallback은 함수를 반환!
ex) 사용법
useCallback(fn, deps)useCallback은 deps가 변한다면, fn 이라는 새로운 함수를 반환한다.
// useCallback 이 () => {console.log(why)} 라는 함수를 반환한다.
const useCallbackReturn = useCallback(() => {console.log(why)}, [ex]);
// useCallback 이 담겨있는 함수를 실행
useCallbackReturn()
return (
<>
<button onClick={() => setEx((curr) => (curr + 1))}>X</button>
<button onClick={() => setWhy((curr2) => (curr2 + 1))}>Y</button>
</>
);위 useMemo와 비슷한 예시코드로 useCallback은 ()=> {console.lo(why)} 라는 함수를 반환해준다.
실행의 순서는
- 처음 컴포넌트가 시작될때 실행 ()=> console.log(0)
- ex가 변할때까지 함수는 ()=> console.log(0)
- ex가 변한다면 그제서야 why의 값을 가져와서 ()=> console.log(new)
중요한 점은 why값이 바뀌어도 실행x, deps인 ex 라는 변수가 변해야 그때서야 함수 컴포넌트와 상태값(why)를 공유
3. useCallback의 새로고침
useCallback 은 deps 가 변하면서 함수를 반환할 때, 형태가 같더라도 아예 새로운 함수를 반환한다
const add1 = () => {};
const add2 = () => {};두 함수는 다르다.
각 변수는 같은 함수를 바라볼뿐 전혀 다른 변수!
바라보는 값만 같을뿐, 전혀 다른 메모리를 가진 변수이다.
useCallback은 새로운 함수를 반환한다.
const useCallbackReturn = useCallback(() => {}, [ex])ex가 변할때, useCallback은 새로운 함수를 반환
ex == 0일때와 ex == 1 일 때의 ()=>{} 함수는 다른 함수
새로운 무기명 함수를 반환했기 때문이고, 값이 같을 뿐 다른 메모리이다.
