Chrome의 React Developer Tools의 Components 탭을 활성화하여 컴포넌트의 렌더링을 시각적으로 확인할 수 있다.
장바구니 추가 버튼을 눌렀을 때 장바구니 추가와 상관없는 부분들인 헤더, 사이드바, 추천 상품 등의 부분이 불필요하게 렌더링되는 모습을 볼 수 있다.
memo 적용 전
불필요한 렌더링이 일어나는 컴포넌트들을 React.memo로 감싸줬다.
import { memo } from "react";
export default memo(RecommandProducts);
export default memo(Header);
export default memo(DocsSidebarNav);
export default memo(ProductInfo);memo 적용 후
memo로 감싼 컴포넌트들의 렌더링이 되지 않는 모습을 확인할 수 있다.
