Blog

서론#

메모이제이션은
React 전용 개념이 아니다.

프로그래밍 전반에서
오래전부터 사용돼 온 계산 최적화 기법이다.

그런데 React에서 메모이제이션은
종종 이렇게 오해된다.

• 성능을 올려주는 옵션
• 렌더링을 막아주는 기술
• 쓰면 무조건 좋은 것

이 글은
그 오해를 걷어내기 위해,
메모이제이션이 정확히 무엇을 하는 기술인지부터 정리한다.

메모이제이션의 핵심 정의#

메모이제이션(memoization)은
함수의 입력과 결과를 기억하는 기법이다.

정확히 말하면 이렇다.

같은 입력이 들어왔을 때
이전에 계산한 결과를 재사용한다.

즉, 메모이제이션은
"빠르게 계산하는 기술"이 아니라
"계산을 다시 하지 않는 기술"이다.

메모이제이션이 성립하기 위한 전제#

아무 계산이나
메모이제이션할 수 있는 것은 아니다.

메모이제이션이 성립하려면
다음 전제가 필요하다.

1. 같은 입력이면 같은 결과여야 한다#

f(2) === f(2);

이 전제가 깨지면
메모이제이션은 성립하지 않는다.

• 랜덤 값
• 현재 시간
• 외부 상태에 의존하는 계산

이런 함수는
메모이제이션 대상이 아니다.

2. 입력이 명확하게 정의돼야 한다#

입력이 불명확하거나
비교할 수 없다면
"같은 입력"인지 판단할 수 없다.

그래서 메모이제이션은
참조 비교와 깊게 연결된다.

이 지점이
React에서 메모이제이션이 어려워지는 이유다.

메모이제이션이 해결하는 문제#

메모이제이션이 해결하는 문제는
불필요한 재계산 하나다.

• 계산이 가벼우면 불필요하지 않다
• 계산이 자주 실행되지 않으면 불필요하지 않다
• 결과를 재사용하지 않으면 불필요하지 않다

즉, 메모이제이션은
비용이 의미를 가질 때만 등장하는 기술이다.

메모이제이션의 비용#

메모이제이션은
공짜가 아니다.

항상 다음 비용을 동반한다.

• 결과를 저장하기 위한 메모리 사용
• 입력을 비교하기 위한 비용
• 캐시 무효화에 대한 복잡성

그래서 메모이제이션은
"빠르게 만드는 기술"이 아니라
계산 비용을 메모리와 복잡도로 바꾸는 기술에 가깝다.

메모이제이션과 캐싱의 차이#

메모이제이션은
캐싱의 한 형태지만,
모든 캐싱이 메모이제이션은 아니다.

차이를 정리하면 이렇다.

• 캐싱: 데이터를 저장하고 재사용
• 메모이제이션: 함수 단위의 입력 → 출력 캐싱

React에서 메모이제이션이
함수, 값, 컴포넌트 단위로 이야기되는 이유도
이 구조 때문이다.

React에서 메모이제이션이 특별해지는 이유#

일반적인 함수 호출과 달리,
React에서는 렌더링이 반복된다.

렌더링이 반복되면:

• 함수는 다시 생성되고
• 계산은 다시 실행되고
• props는 새 참조를 갖게 된다

React에서 메모이제이션은
이 반복되는 렌더링 과정에서
무엇을 재사용할 것인지 결정하는 기준이 된다.

정리#

메모이제이션은
무조건적인 성능 향상을 보장하는 기술은 아니다.

• 같은 입력이면 같은 결과라는 전제 위에서
• 불필요한 재계산을 줄이기 위해
• 계산 비용을 다른 비용으로 교환하는 선택

이게 메모이제이션이다.