리액트를 사용하다 보니 불필요한 리랜더링을 막아 성능을 최적화 하기 위해 useMemo라는 것을 쓰는데 뭔지 알고싶어 공부하다가 Memoization에 대해 알게 되었습니다.
Memoization은 간단하게 한번 동작했던 키 혹은 상태를 저장해두고 해당 키를 사용한 동작을 다시 할 때 이전에 결과값에서 가져오는 알고리즘입니다
아래의 코드를 보면 어?? 왜 함수를 재 호출했는데 cache의 값이 초기화되지않지? 하는 의문이 생길 수 있습니다.
이를 통해 클로저의 개념까지 알아 볼 예정입니다.
function memoize(func) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args); // 인수 배열을 문자열로 변환하여 고유한 키 생성
if (cache[key]) {
console.log("From cache");
return cache[key]; // 캐시에서 결과 반환
} else {
console.log("New calculation");
const result = func(...args); // 함수를 호출하여 결과 계산
cache[key] = result; // 결과를 캐시에 저장
return result;
}
};
}
function expensiveOperation(x, y) {
return x + y;
}
const memoizedExpensiveOperation = memoize(expensiveOperation);
console.log(memoizedExpensiveOperation(2, 3));
console.log(memoizedExpensiveOperation(2, 3));
console.log(memoizedExpensiveOperation(4, 5));
console.log(memoizedExpensiveOperation(4, 5));
위의 함수를 보면 memoize 함수가 내부에 함수를 반환하고 있는데 해당함수는 Closer함수입니다
상위스코프의 변수인 cache를 참조할수있으며 해당 변수를 참조할때의 상황을 기억합니다
그래서 맨 아래 콘솔로그부분에 보면 처음 2,3이 입력되었을때 key값으로 [2,3] value 값으로 5가 저장이 됩니다
이후 같은 값으로 함수를 호출하면
내부 클로저함수에서 상태를 기억하기 때문에 키값이 [2,3]인 값이 존재하는 것을 확인하고 cache의 값에서 꺼내주는것입니다.
이를 통해 불필요한 과정을 생략함으로써 성능의 향상을 기대할 수 있습니다.
'개발 이론' 카테고리의 다른 글
마이크로 프론트엔드 아키텍쳐 (1) | 2024.01.31 |
---|---|
bundler에 대하여 (0) | 2024.01.28 |
React component life cycle (0) | 2023.10.02 |
브라우저 랜더링3 (최적화) (0) | 2023.09.20 |
브라우저 랜더링 2(랜더링엔진, 최적화) (0) | 2023.09.20 |