react.memo / useMemo / useCallback 간단비교

웹 최적화를 위해 , memoization를 적용한 리액트API 이다.

키워드

memoization
이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술

메모이제이션을 위한 메모리도 소요되기 때문에 꼭 필요한 곳에서 최적화 API를 적용해야 한다.

얕은 비교를 수행하며 데이터들의 주솟값을 참조하게 된다. (기존 데이터나 함수를 새로운 주솟값으로 재 지정하지 않는 방법이다.)

React.memo

컴포넌트의 결과값을 memoized하며 불필요한 리렌더링을 막는다.
HOC로 사용되어 컴포넌트를 감싸준다.

useMemo

함수의 결과값을 memoized하여 불필요한 연산을 막는다.

useCallback

함수를 memmoized하여 동일 함수를 재 생성하지 않는다.

사용하면 좋은 경우

• 많은 prop을 전달받을 때
• 리렌더링이 발생시, 전달받은 Prop은 유지되고 있는 상황
• 순수함수인 경우
• 컴포넌트의 규모가 큰 경우
  (부모요소의 리렌더링 발생 시, 자식요소까지 리렌더링 발생됨)

주의하기

• 오로지 리렌더링을 막겠다는 의도로 남용하지 말고, 꼭 필요한 곳에 적용한다.
• 불필요하게 적용했을 때는 추가적인 메모리만 더 소비하는 것이다.
• 데이터나 함수반환값이 의도와 다르게 변경되지 않는 경우가 있어 정확하게 파악하고 적용해야 한다.