React.memo 사용 예제

지난 주부터 미친듯이 React.memo, useMemo, useCallback에 대해서 검색했지만 

모두 어디서부터인가 흘러들어온 Movie 예제에 대해서 말할 뿐, 명확한 것이 없어서 React.memo를 사용한 썰을 푼다. 

물론 내가 남기는 글이 명확하고, 정확하지 않을 수도 있다. 

 

아래는 내가 개발한 대시보드 목록 화면이다. 아래 화면은 각각의 이유로 REST API를 두 번 호출한다.

 

1. 초기화 후 리스트 출력을 위해 대시보드 목록 조회 --> Rerender 2번 발생 

2. 추가하기 버튼을 위해 대시보드 테마 조회  --> Rerender 2번 발생 

 

이차저차해서 전체 페이지(부모 컴포넌트)에서는 총 4번의 Rerender가 발생하고,

부모 컴포넌트의 상태값이 변했으니 자식 컴포넌트도 props가 변한 것을 눈치채고 CDU를 한다! 

 

(아래 이미지의 빨간 박스는 각각 자식 컴포넌트이다)

 

 

 

1, 2는 별도의 기능인데 부모의 상태값이 변했기 때문에,

자식 컴포넌트가 불필요하게 Rerender되는 것을 방어하고자 React.memo를 사용한다.

 

목록 컴포넌트에서 이전 목록 값과 변한 목록 값을 비교해서, 참이면 컴포넌트를 Rerender하지 않도록 변경했다.

condition에 callback function 안쓰면 아무 의미 없다. 

 

import React from 'react';
import ContentListItem from 'components/contents/ContentListItem';

function ContentList({ list }) {
  return (
    <ul className="dash-list">
      {list.map(item => {
        return <ContentListItem key={item.id} item={item} />;
      })}
    </ul>
  );
}

export default React.memo(
  ContentList,
  (prevProps, nextProps) => prevProps.list === nextProps.list,
);