메모이제이션 (memoization)
: 값비싼 함수 호출의 결과를 캐싱하고, 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 프로그래밍 기술
- 이미 함수가 실행되어서 연산된 값이 있다면 , 함수를 다시 호출하지 않고 기존에 연산된 값을 재활용하는 방식
useMemo
: 메모이제이션된 값을 반환 하는 리엑트 훅
- 직전에 연산된 값이 있다면, 다시 연산을 하지 않고 해당 캐싱되어있던 값을 반환
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);- 처음 인자 : 값을 연산하고 반환하는 함수
- 두번째 인자 : 의존성 배열
- 해당 배열에 들어가있는 값이 변경되었을때만, 앞에 있는 함수가 다시 실행됨
∴ useMemo 훅이 연산을 수행하면 결과를 메모리에 저장 -> 배열내의 값이 하나라도 변경되면 다시 연산을 수행
∴ 결과가 항상 최신 상태로 유지되며, 불필요한 재연산 피하기 가능
참고문헌
useMemo, useCallback으로 최적화가 꼭 필요할까?
useMemo와 useCallback은 왜, 언제 사용할까?
