react - 리액트 최적화: 메모이제이션, 언제하면 되나

개요

리액트 제공 API 중 useMemo, useCallback, memo 는 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해 사용된다. 그런데, 언제 정확히 써야하는걸까?
메모이제이션 비용과 렌더링 비용은 어떻게 비교하는걸까?

여기에 대해서는 갑론을박이 많다.

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

• 메모이제이션도 비용이 든다.
• 간단한 연산은 자바스크립트 메모리 어딘가에 두었다 꺼내오는 것보다, 매번 해당 작업을 수행하는게 더 빠르고 좋다.
• premature optimization은 지양해야 한다.
• 렌더링이 그렇게 큰 비용이 들면, 기본 리액트에서 이미 모든 컴포넌트를 PureComponent 나 memo 로 감싸서 나왔겠지.
• 메모이제이션은 무조건 좋은게 아니라, trade off 가 있다. 희생하는 면도 고려해야.
• 무조건 좋은 방향은 없음. 하드웨어 기술의 발전이 있으면, 매번 연산을 하는게 메모리에 저장하는 것보다 비용이 줄어들 수도 있어. 최적화 전략은 상황에 따라 판단. 미래에는 useMemo 가 최적화 기법으로 남아있지 않을 수도.

주장2: 렌더링 비용은 비싸다. 모조리 메모이제이션 하라.

• 일부 컴포넌트를 메모이제이션하는건 당장 성능에 도움이 된다.
• 렌더링이 자주 일어나고, 그 렌더링 안에 비싼 연산이 있다면 메모이제이션의 이점은 분명하다.
• 일단 모두 memo로 감싸고 지불해야 하는 비용은 props 의 얕은 비교뿐? -> 렌더링의 비용과 비교하면 훨씬 싸다.