useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공된다. 이러한 메모이제이션은 언제 사용하는 것이 좋을까?
⚠️주장 1: 섣부른 최적화는 독이다. 꼭 필요한 곳에만 메모이제이션을 추가하자.
- 메모이제이션도 비용이 드는 작업이므로 최적화에 대한 비용을 지불할 때는 항상 신중해야 한다.
- 가벼운 작업은 메모이제이션보다 매번 작업을 수행해 결과를 반환하는 것이 빠를 수 있다.
💸주장 2: 렌더링 과정의 비용은 비싸다. 모조리 메모이제이션해 버리자.
- 리액트는 이전 렌더링 결과를 다음 렌더링과 구별하기 위해 저장해 둬야 한다. 그것이 기본적인 리액트의 재조정 알고리즘이기 때문이다.
- 즉, 이전 결과물은 어떻게든 저장해두고 있기 때문에 우리가 memo로 지불해야하는 비용은 props에 대한 얕은 비교뿐인 것이다.
- 리렌더링이 발생할 때 메모이제이션이 없다면 모든 객체는 재생성되고, 결과적으로 참조는 달라지게 된다.
- 메모이제이션은 하지 않는 것보다 메모이제이션 했을 때 더 많은 이점을 누릴 수 있다.
📝결론 및 정리
아직 리액트를 배우고 있거나 혹은 리액트를 깊이 이해하고 싶고, 이를 위해 시간을 투자할 여유가 있다면 섣부른 메모이제이션을 지양하는 자세를 견지하면서 실제 어느 지점에서 성능상 이점을 누릴 수 있는지 살펴보는 식으로 메모이제이션을 적용하는 것을 권장한다.
현업에서 리액트를 사용하거나 실제로 다룰 예정이지만 성능에 대해 깊게 연구해 볼 수 없는 상황이라면 일단 의심스러운 곳에는 먼저 다 적용해 볼 것을 권장한다.