[React] React.memo

React.memo

React에서 제공하는 고차 컴포넌트(Higher-Order Component)이다.
이를 사용하여 컴포넌트의 리렌더링을 최적화할 수 있다.

일반적으로 React 컴포넌트는
부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 함께 리렌더링된다.

그러나 자식 컴포넌트가 자체적으로 상태나 속성이 변경되지 않는다면,
불필요한 리렌더링은 성능 저하를 가져올 수 있습니다.

React.memo는 컴포넌트를 감싸고,
전달 받은 속성(props)이 변경되지 않는 한 리렌더링을 방지한다.

React.memo로 감싼 컴포넌트는 이전에 렌더링된 결과를 기억하고,
전달 받은 속성(props)이 변경되지 않았다면 다시 렌더링하지 않는다.

적용 전

export default function MyComponent(props) {
  // 컴포넌트 내용
}

적용 후

const MyComponent = React.memo(props => {
  // 컴포넌트 내용
});

메모

자식 컴포넌트의 불필요한 리렌더링을 줄이기 위한 최적화 기법