Memoization을 사용해야하는 때는 언제인가요?

Question

**함수/값을 생성하는 비용** vs **함수/값을 유지하는 비용** 중에 어떤 걸 기준으로 Memoization 해야할까요?

soaple · Answer

안녕하세요, 소플입니다. 먼저 Memoization은 일반적으로 컴퓨터 분야에서 최적화를 위해 사용되는 개념입니다. 컴퓨터의 입장에서 비용이 높은(즉, 연산량이 많이 드는) 함수의 호출 결과를 저장해놨다가, 완전히 동일한 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환해주는 것입니다. 이렇게 Memoization을 사용하게 되면 중복 연산을 하지 않기 때문에 함수 호출 결과를 받기까지 시간도 짧아지고 컴퓨팅 자원도 적게 소모하게 됩니다. 그리고 메모이제이션 된 결괏값을 영어로는 **Memoized value**라고 부릅니다. 메모이제이션의 **메모**는 우리가 평소에 **메모하다**라고 표현을 하는 것과 비슷한 맥락이라고 생각하면 됩니다. Memoization을 적용할 때는 함수/값을 생성하는 비용과 함수/값을 유지하는 비용 간의 균형을 고려해야 합니다. 그리고 이 균형을 유지하면서 Memoization을 적용해야 최적의 성능을 얻을 수 있습니다. ### 1. 함수/값 생성 비용이 높을 경우 함수 호출 또는 값을 생성하는데 상대적으로 더 많은 시간이 소요되는 경우에는, 해당 함수의 결과를 Memoization하여 중복 계산을 방지할 수 있습니다. 이 경우에는 Memoization을 사용하여 이전에 계산된 값을 저장하고 재사용함으로써 함수 호출 또는 값 생성 비용을 절감할 수 있습니다. ### 2. 함수/값 유지 비용이 높을 경우 Memoization을 사용하여 이전에 계산된 결과를 저장하게 되면 컴퓨터의 메모리 사용량이 증가할 수 있습니다. 그래서 Memoization을 사용할 때는 이러한 메모리 사용량 증가도 고려해야 합니다. 만약 Memoized value를 유지하는 비용이 생성하는 비용보다 더 높을 경우에는, Memoization을 적용하는 것보다 매번 생성하는 것이 최적화 관점에서 더 나은 선택일 것입니다. 그래서 이러한 각 비용을 잘 비교해서 Memoization을 할지 말지 선택하는 것이 필요한데, 리액트에서는 대부분의 값을 Memoization하는 것이 좋습니다. 왜냐하면 리액트 컴포넌트는 재렌더링이 빈번하게 일어나는 경우가 많기 때문에, 그 과정에서 함수/값을 생성하는 과정 또한 불필요하게 여러번 반복적으로 실행될 수 있기 때문입니다. 함수/값 생성 비용은 낮지만 빈도가 높다면 그 또한 연산량이 많다고 볼 수 있는 것이죠. 그리고 특히 프론트엔드 단에서는 메모리에 올라가는 Memoized value의 크기를 고려해야 할만큼 굉장히 큰 값은 거의 없습니다. 함수/값을 유지하는 비용을 고려할 정도로 메모리를 많이 차지하는 경우는 잘 없다고 보면 됩니다. 그리고 만약 그런 경우가 있다면 애초에 Memoization을 할 것이 아니라, 컴포넌트가 들고있는 함수/값의 양을 줄이는 방향으로 최적화를 진행하는 것이 좋습니다. 데이터의 양이 많다면 일정 단위로 끊어서 가져오는 Pagination을 적용하거나, Data Sampling을 통해서 데이터를 압축시키는 등의 방법을 사용할 수 있겠죠. 마지막으로 리액트에서 Memoization을 위해 제공하는 `useMemo()`와 `useCallback()` 훅의 예시 코드를 첨부합니다. ```tsx import { useMemo, useCallback } from 'react'; function MyComponent(props) { const { num1, num2 } = props; const memoizedValue = useMemo(() => { return num1 + num2; }, [num1, num2]); const memoizedCallback = useCallback(() => { console.log('Memoization 된 함수입니다.'); }, []); return (

{`SUM: ${memoizedValue}`}

); } export default MyComponent; ``` 감사합니다.