• 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해 제공되는 것: useMemo, useCallback, memo
• 공통 전제: 일부 컴포넌트에서는 메모이제이션을 하는 것이 성능에 도움이 된다.
• ex. 렌더링이 자주 일어나며 + 그 렌더링 사이에 비싼 연산이 포함돼 있고 + 심지어 그 컴포넌트가 자식 컴포넌트 또한 많이 가지고 있다면

1. memo를 컴포넌트의 사용에 따라 잘 살펴보고 일부에만 적용하는 방법 = 주장1 -> 생각보다 최적화나 성능 향상에 쏟을 시간이 많지 않음
2. memo를 일단 그냥 다 적용하는 방법 = 주장 2

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

• 섣부른 최적화 = premature optimization or premature memoization
• 꼭 필요한 곳을 신중히 골라서 메모이제이션해야 한다는 입장
• 메모이제이션도 비용이 드는 작업이므로 최적화에 대한 비용을 지불 할 때는 항상 신중해야 한다고 주장
• 애플리케이션을 어느 정도 만든 이후에 개발자 도구나 useEffect를 사용해 실제로 어떻게 렌더링이 일어나고 있는지 확인하고 필요한 곳에서만 최적화하는 것이 옳다.

🤔 메모이제이션의 비용

1. 값을 비교하고 렌더링 또는 재계산이 필요한지 확인하는 작업
2. 이전에 결과물을 저장해 두었다가 다시 꺼내오는 작업

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

🤔 잘못된 memo로 지불해야 하는 비용

• props에 대한 얕은 비교가 발생하면서 지불해야 하는 비용 => props가 크고 복잡해진다면 이 비용 또한 커질 수 있음
• CPU와 메모리를 사용해 이전 렌더링 결과물을 저장해 둬야 함 = 리액트의 재조정 알고리즘 => 따로 지불하지 않아도 됨

🤔 memo를 하지 않았을 때 발생할 수 있는 문제 => 더 큼

• 렌더링을 함으로써 발생하는 비용
• 컴포넌트 내부의 복잡한 로직의 재실행