React.memo로 컴포넌트 최적화 해보기

회사 프로젝트를 진행하던중 사이트가 렌더링 되는 속도가 느린것을 발견하여 최적화를 진행해 보기로 했다.

컴포넌트 성능을 측정하기 위해 react profiler를 사용하였다.

처음 성능을 측정한 결과

최적화 전 성능 측정 결과

상품을 보여주는 카드 컴포넌트가 스크롤이 될때마다 새로 렌더링이 계속 되어 사이트 성능에 영향을 주고 있는것을 확인하였다. 

function CardItem({item, isProfile}: {item: C2CRelatedGoods; isProfile?: boolean}){
	const {price, createdAt, product, mainImage, id, user, discount, sellPrice, titleImage, code, originalPrice} = item
 	...
 	return (
    	<S.CardWrapper>
  			...
    	</S.CardWrapper>
 	)
}

export default CardItem

코드를 확인해보니 item props를 통해 동일한 데이터를 전달받고 있고 렌더링이 자주 일어나 해당 컴포넌트를 최적화해야겠다고 생각했다.

function CardItem({item, isProfile}: {item: C2CRelatedGoods; isProfile?: boolean}){
	const {price, createdAt, product, mainImage, id, user, discount, sellPrice, titleImage, code, originalPrice} = item
 	...
 	return (
    	<S.CardWrapper>
  			...
    	</S.CardWrapper>
 	)
}

export default React.memo(CardItem)

함수에 React.memo를 적용하여 최적화를 진행하였다.

 

최적화 후 성능 측정 결과

최적화 후 성능 측정 결과

최적화를 진행한 후 눈에 띄게 렌더링 시간이 줄어든것을 확인할 수 있다!

그렇다면 React.memo를 언제 사용해야 할까?

React.memo를 사용하는 시점

컴포넌트가 같은 props로 자주 렌더링되거나, 무겁고 비용이 큰 연산이 있는 경우, React.memo()로 컴포넌트를 래핑할 필요가 있다.