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

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

 

메모이제이션

• 리액트에서 제공하는 useMemo, useCallback, memo 등은 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공

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

• 메모이제이션도 어디까지나 비용이 드는 작업이므로 쵲거화에 대한 비용을 지불 할 때는 항상 신중해야 됨.
• 대부분 가벼운 작업 자체는 메모이제이션해서 자바스크립트 메모리 어딘가에 두었다가 그것을 다시 꺼내오는 것보가 매번 작업을 수행해 결과를 반환하는 것이 더 빠를수도 있음.
  • 값을 비교하고 렌더링 혹은 재계산이 필요한지 확인하는 비용
  • 결과물을 저장해 두었다가 다시 꺼내와야한다는 두가지 비용

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

• 잘못된 memo로 지불해야하는 비용은 바로 props에 대한 얕은 비교가 발생하면서 지불해야하는 비용
  • 메모이제이션을 위해서는 CPU와 메모리를 사용해 이전 렌더링 결과물을 저장해 둬야하고, 리렌더링할 필요가 없다면 이전 결과물을 사용해야 함.
  • 이러한 과정은 리액트의 재조정 알고리즘이다. 즉, 이전 결과물은 어떻게든 저장해두고 있다. 따라서 memo로 지불해야하는 비용은 사실상 props에 대한 얕은 비교뿐 인것이다. 
    • 단 props의 복잡도에 따라 비용도 커질 수 있음.
• 반면, memo를 사용하지 않는 경우 발생할 수 있는 문제는 다음과 같음 (위험 비용이 더 크다는 사실을 알 수 있음)
  • 렌더링을 함으로써 발생하는 비용
  • 컴포넌트 내부의 복잡한 로직의 재실행
  • 위 두가지 모두가 모든 자식 컴포넌트에서 일어남
  • 리액트가 구 트리와 신규 트리를 비교

결론

• 앞서 리액트 파이버에서 작동과 흐름을 살펴봐서 알겠지만 일반적으로는 props에 대한 얕은 비교를 수행하는 것보다 리액트 컴포넌트의 결과물을 다시 계산하고 실제 DOM까지 비교하는 작업이 더 무겁고 비싸다
• 조금이라도 로직이 들어간 컴포넌트는 메모이제이션이 성능 향상에 도움을 줄 가능성이 크다.