react memoization 2 ) React.memo

1편에서 pure component에 대해서 이야기 했다. 

 

pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서
설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다.

 

리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다.

React.memo

• React.memo pure component를 최적화하는 escape hatch

function Decoration() {
  return (
    <div className="decoration">
      ⛵️
    </div>
  );
}

const PureDecoration = React.memo(Decoration);

export default PureDecoration;

 

React.memo를 사용해서 우리는 리액트에게 알려줄 수 있습니다

 

“이 컴포넌트는 pure해! 따라서 동일한 props와 state라면 리렌더링 할 필요 없어! ”

리액트는 이전 스냅샷을 기억하고 있기 때문에, props가 변경되지 않으면 새로운 스냅샷을 만들어서 제공하지 않고 기존의 스냅샷을 전달합니다.