Memoization 과 Closer

리액트를 사용하다 보니 불필요한 리랜더링을 막아 성능을 최적화 하기 위해 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의 값에서 꺼내주는것입니다. 

 

이를 통해 불필요한 과정을 생략함으로써 성능의 향상을 기대할 수 있습니다.