잘못 된 내용에 대한 지적은 언제든 환영입니다.
React.memo
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의 items01과 items02가 같으면 리렌더링
function compareFunc(prevProps, nextProps) {
prevProps.items01 === nextProps.items01 &&
prevProps.items02 === nextProps.items02;
}
export default React.memo(Component01, compareFunc);
References
"19. React.memo 를 사용한 컴포넌트 리렌더링 방지" .velopert
"React.memo() 현명하게 사용하기" .xiubindev
"Use React.memo() wisely" .Dmitri Pavlutin