모던 리액트 Deep Dive - 메모이제이션

⚡리액트 핵심요소 깊게 살펴보기 - 2.5 컴포넌트와 함수의 무거운 연산을 기억해두는 메모이제이션

리액트에서 제공하는 API 중 useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공되는데, 정확히 언제 사용하는 것이 좋을까?

2.5.1 주장1 : 섣부른 최적화는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자

• 꼭 필요한 곳을 신중히 골라서 메모이제이션해야 함
• 메모이제이션도 어디까지나 비용이드는 작업이므로 최적화에 대한 비용을 지불할 때는 항상 신중해야 함

2.5.2 주장2 : 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션 해버리자

• 리액트는 이전 렌더링 결과를 다음 렌더링과 구별하기 위해 저장해 둬야 하는데, 기본적인 리액트의 재조정 알고리즘이기 때문
• 이전 결과물은 어떻게든 저장해두고 있기 때문에 우리가 memo로 지불해야하는 비용은 props에 대한 얕은 비교뿐인 것
• 리렌더링이 발생할 때 메모이제이션이 없다면 모든 객체는 재생성되고, 결과적으로 참조는 달라지게 됨
• 메모이제이션은 하지 않는 것보다 메모이제이션 했을 때 더 많은 이점을 누릴 수 있음