오늘의 유튜브 : [Trailer] 성능 하면 빠질 수 없는 메모이제이션, 네가 궁금해
참고 : Naver D2 해당 게시글
오늘은 평소 구독해놓은 Naver D2에 오랜만에 영상이 올라와서 봤는데, 재밌는 주제였다.
메모이제이션과 관련하여, 함수형 프로그래밍, 성능 테스트 등 배울 수 있었다.
이전 프로젝트에서 일부 React를 활용하여 담당한 부분이 있었는데, 그 때 반복해서 등장하는 팝업창이 너무 메모리를 많이 차지하여 결국 적용에 실패했던 경험이 있었다.
당시, 메모이제이션 방법을 활용했더라면.. 이라는 생각이 들었다.
-
메모이제이션(Memoization) : 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 불필요하게 다시 계산하는 대신 캐싱된 결과를 반환하는 기술
-
리액트에서는 useCallback, useMemo와 같은 메모이제이션 훅을 통해 성능을 향상시키고 코드의 복잡성을 줄일 수 있지만, 필요하지 않은 경우 남용하면 성능이 저하된다.
- 함수형 프로그래밍과 메모이제이션
-
메모이제이셔은 순수 함수의 실행을 최적화하기 위해 일반적으로 함수형 프로그래밍에서 사용된다.
함수형 프로그래밍 : 계산을 수학적 함수의 평가로 취급, 상태 및 가변 데이터 변경을 방지하는 프로그래밍 패러다임
-
메모이제이션은 순수 함수 호출을 최적화하고 중복 계산을 줄이며, 성능을 향상시키는 방법을 제공함으로써 함수형 프로그래밍을 보완하는 기술
- 함수형 프로그래밍 언어에서 메모이제이션 구현
- 클로저, 고차 함수, 해시 테이블과 같은 데이터 구조를 통해 함수형 프로그래밍 언어에서 메모이제이션을 구현할 수 있다
function memoize(func) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
console.log("Fetching result from cache...");
return cache[key];
}
console.log("Computing result...");
const result = func(...args);
cache[key] = result;
return result;
};
}
function sum(a, b) {
console.log("Executing sum function...");
return a + b;
}
const memoizedSum = memoize(sum);
console.log(memoizedSum(2, 3)); // Executing sum function... (result: 5)
console.log(memoizedSum(2, 3)); // Fetching result from cache... (result: 5)
console.log(memoizedSum(4, 5)); // Executing sum function... (result: 9)
console.log(memoizedSum(4, 5)); // Fetching result from cache... (result: 9) - 성능 테스트
(보통 메모이제이션 성능 테스트 예시로 피보나치 수열이 자주 등장하는데, 여기선 jsperf를 이용해서 성능 테스트를 진행한다)
중복 연산을 모두 계산한 경우(without memoization)와 메모이제이션을 사용해 중복 연산을 피한 경우(with memoization)의 초당 수행 횟수(Ops/sec)를 비교하면 메모이제이션 사용 시 약 250배의 성능 향상을 확인할 수 있다.
- 마무리
리액트와 관련하여 더 자세한 글은 위 블로그 링크를 통해 보실 수 있습니다. 해당 글에서 마지막에도 언급해주셨지만, 메모이제이션이 결코 공짜가 아니며(캐시미스가 많아질수도 있고 모든 입출력을 유지해야하므로 메모리 사용량 증가) 최적화를 포함한 모든 연산에 비용이 드니 사용할 때 주의해야할 것 같다!
