[JavaScript] 클로저와 메모이제이션 - 클로저(4)

4. 클로저와 메모이제이션

지난 포스팅에서는 고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 이번 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다.

 

목차

1. 자바스크립트에서 함수는 “값"이다.
2. 고차함수
3. 클로저의 이해
4. 클로저와 메모이제이션
5. 리액트에서의 클로저
6. 클로저 사용 시 주의할 점
7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고)

---

 

클로저의 특성을 활용한 대표적인 예시가 메모이제이션 입니다. 값을 저장하고 달라지지 않는 이상 저장된 값을 반환하는 형태이죠. 인자에 어떤 숫자를 전달하던 올바른 값을 반환하는 순수함수인 팩토리얼 함수가 있습니다. 팩토리얼 함수는 여러번 호출할 때마다 매번 재귀로 실행하여 값을 반환합니다. 여기서 매번 호출할 때마다 값을 계산하기 보다는 앞에서 다룬 클로저의 개념을 활용하면 이전에 계산했던 값을 기억할 수 있지 않을까요?

---

그래서 메모 함수를 만들었습니다. 메모함수는 숫자를 받아 숫자를 리턴하는 외부 함수를 인자로 받습니다. 그리고 결과를 저장하기 위한 lockupTable이라는 객체를 선언합니다. 클로저를 형성하는 내부함수인 returnFn은 외부 함수 memo의 lockupTable과 fn에 접근할 수 있습니다. 이 함수는 주어진 숫자를 인자로 받고, lockupTable에 해당 숫자가 키값으로 있으면 그 값을 반환하고 없다면 외부 fn함수를 실행한 결과값을 저장하면서 리턴합니다. memo함수를 감싼 fastFactorial 함수가 호출되면 memo 함수 내에서 클로저가 생성되고, returnFn 함수가 반환됩니다. returnFn 함수는 이미 계산된 팩토리얼 결과를 저장하고, 중복 계산을 피하하며 최적화된 결과를 반환합니다. 할 수 있게 됩니다. 이렇게 fastFactorial 함수는 메모이제이션을 통해 계산 성능을 향상시킬 수 있게 됩니다.

---

정리

클로저를 활용한 메모이제이션의 예시 까지 살펴보았습니다. 지금까지 이 흐름을 잘 따라와주셨더라면 리액트에서 클로저를 어떻게 활용하고 있는지 감이 오실 수도 있을 것 같습니다. 혹시 React hook이 떠오르지 않으시나요? 다음 포스팅에서는 리액트가 클로저를 어떻게 활용하고 있는지에 대해 다루겠습니다.