[React] 13. React.memo를 통한 컴포넌트 리렌더링 최소화

백괴·2021년 9월 13일

React 리액트

리액괴

목록 보기

11/14

잘못 된 내용에 대한 지적은 언제든 환영입니다.

`React.memo`

props로 전달받는 값의 변화가 없는 함수형 컴포넌트의 불필요한 리렌더링을 방지하는 함수이다.
useCallback, useMemo와 더불어 성능 최적화에 도움이 된다.

`React.memo` 함수의 구조

React.memo(component[, propsAreEqual])

component : 불필요한 리렌더링을 방지하고자 하는 함수형 컴포넌트
propsAreEqual : 리렌더링의 기준이 되는 props 비교 방식을 결정하는 함수

`React.memo` 사용해보기

React를 import해야 사용이 가능하다.

   import React from 'react';

기본적으로 함수형 컴포넌트를 React.memo() 함수로 감싸는 식으로 사용한다.

   function Component01({...}) {...}
   export default React.memo(Component01);

   const Component02 = React.memo(function Component02(props) {...});

두 번째 파라미터에 props 비교 함수를 넣어 리렌더링의 기준을 정할 수 있다.

   // 과거와 현재 props의 items01과 items02가 같으면 리렌더링
   function compareFunc(prevProps, nextProps) {
     prevProps.items01 === nextProps.items01 &&
     prevProps.items02 === nextProps.items02;
   }

   export default React.memo(Component01, compareFunc);