메모이제이션이라는 단어는 자주 들어오는데, 실제로 캐시가 어디에 저장되고 어떤 구조로 관리되는지까지 추적해볼 수 있다. 그리고 React Compiler가 등장했다면, 그 컴파일러가 내부적으로 어떤 단계를 거쳐 메모이제이션을 자동으로 만들어내는지까지. 이 글은 그 깊은 부분까지 파고들어본 내용을 정리한 것이다.
메모이제이션(Memoization)은 컴퓨터 사이언스에서 오래된 최적화 기법이다. 어떤 함수를 실행했을 때 나온 결과를 미리 저장두고, 동일한 입력이 들어오면 함수를 다시 실행하지 않고 저장된 결과를 그대로 반환하는 것이다.
단어의 어원 자체가 "메모(memo)"에서 온다. 메모를 붙여두는 것과 정확히 같은 개념이다.
비유하면 이렇다. 수학 시험을 준비할 때, 어려운 공식의 유도 과정을 한 번 외우고 나면 그 이후에는 유도 과정을 다시 하지 않고 결과만 기억한다. 메모이제이션은 이 "결과만 기억하는 것"을 프로그램이 자동으로 하는 것이다. 입력이 바뀌면 다시 유도하고, 같은 입력이면 기억한 답을 바로 꺼낸다.
많은 사람들이 "메모이제이션 = 캐싱"이라고 같은 개념으로 사용한다. 크게 틀린 것은 아닌데, 엄밀히 말하면 캐싱은 더 큰 개념이고 메모이제이션은 그 안의 특정 형태이다.
캐싱은 "데이터를 빠른 접근 가능한 곳에 임시로 저장하는 행위" 자체이다. HTTP 응답을 디스크에 저장하는 것도 캐싱이고, 앱 레벨에서 API 결과를 메모리에 두는 것도 캐싱이다. 메모이제이션은 그 중에서 "함수의 계산 결과를 입력값 기준으로 캐시하는 것" 이라는 더 구체적인 형태이다.