[React] React.memo 사용법

 

React.memo()

 

UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC) React.memo()를 제공한다.

컴포넌트가 React.memo()로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(memoizing)한다.

그리고 다음 렌더링이 일어날 때 props가 같다면, Rect는 메모이징된 내용을 재사용한다.

 

 

 

언제 사용?

 

같은 props로 렌더링이 자주 일어나는 컴포넌트에 사용한다.

• 순수 함수 컴포넌트 일 때
• 자주 렌더링 될 때
• 같은 prop으로 리렌더링 될 때
• 컴포넌트가 클 때 

컴포넌트가 무겁지 않고 자주 다른 props를 받아 렌더링한다면 memo로 감싸는게 불필요 하다. 

 

 

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <Movie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

 

영화 조회수를 나타내는 MovieViewsRealtime 컴포넌트가 있다.

이 어플리케이션은 주기적(매초)으로 서버에서 데이터를 폴링(Polling)해서 MovieViewsRealtime 컴포넌트의 views를 업데이트한다.

views가 새로운 숫자가 업데이트 될 때 마다 MovieViewsRealtime 컴퍼넌트 또한 리렌더링 된다. 이때 Movie 컴포넌트 또한 title이나 releaseData가 같음에도 불구하고 리렌더링 된다.

이때가 Movie 컴포넌트에 메모이제이션을 적용할 적절한 케이스다.

MovieViewsRealtime에 메모이징된 컴퍼넌트인 MemoizedMovie를 대신 사용해 성능을 향상해보자.

 

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

 

title 혹은 releaseDate props가 같다면, React는 MemoizedMovie를 리렌더링 하지 않고 메모이징 된 내용을 그대로 사용하게 된다. 

이렇게 MovieViewsRealtime 컴포넌트의 성능을 향상할 수 있다.

 

 

참고 https://ui.toast.com/weekly-pick/ko_20190731