useMemo와 React.memo의 차이점은?

작성계기

커스텀 엘리먼트를 만드는데 컴포넌트를 export 하는 곳에서 'memo'라는 키워드를 발견했다. 같은? 목적의 useMemo라는 훅이 있는데, 어떤 차이점이 있는지 궁금해 정리해 본다

배운점

• 함수형 컴포넌트를 사용하는 곳에서 useMemo와 React.memo를 동시에 사용할 수 있음

결론

useMemo

• 함수가 처리해서 결과적으로 반환하는 "값"이 이전과 달라졌는지를 비교, 즉 '값' 자체에 집중함
• 계산 비용이 높은 함수의 결과를 캐싱하여 렌더링 성능을 최적화하는 데 사용
• 리스트를 렌더링하는 컴포넌트에서 useMemo를 사용하여 리스트 아이템을 생성할 때, 계산 비용이 높은 함수의 결과를 캐싱하여 렌더링 성능을 최적화할 수 있음

React.memo

• 부모 컴포넌트에서 받는 "props"가 변경되었는지에 집중
• 컴포넌트의 props가 변경되었을 때만 렌더링을 수행하여 렌더링 성능을 최적화하는 데 사용
• 클래스형 컴포넌트의 shouldComponentUpdate와 유사한 역할