[리액트]React.memo사용

React.memo를 사용하면 불필요한 렌더링을 막을수가 있다.

예를 들어 리스트 아이템같은경우 조회된 이후에 변경 사항이 없는 경우 다시 렌더링이 될 필요가 없다.

하지만 로그를 찍어 보면 같이 렌더링을 되는것을 확인 할 수 있다.

이경우 해당 부분을 React.memo 감싸주기만하면 불필요한 렌더링을 막아 줄수가 있다.

 

적용전

const List = ({
    id
}) => {        
  return (
    <div  key={id}>       
    </div>
  )
};
export default List;

적용후

const List = React.memo(({
    id
}) => {        
  return (
    <div  key={id}>       
    </div>
  )
});
export default List;