PureComponent VS React.memo

공식문서

💡 PureComponent란?
클래스 컴포넌트에서 사용되는 Component로 해당 컴포넌트로 넘어오는 props 혹은 내부의 state를 이전값과 비교하여 변경시 리랜더링 되게 해주는 컴포넌트.

💡 React.memo란?
고차컴포넌트(HOC)로 props 값을 memoizing하고 있다가 값이 변경되면 해당 HOC를 리랜더링 되게해주는 함수.

언뜻보면 비슷해 보이는 PureComponent 와 React.memo는 다음과 같은 차이가 있다.

클래스형 컴포넌트 vs 함수형 컴포넌트

PureComponent는 클래스형 컴포넌트에서 사용되며 사용 시 사용하려는 컴포넌트를 extend시켜 사용한다.

import {PureComponent} from 'React'

Class ExampleComponent extends PureComponent {
...
}

React.memo는 일반적으로 함수형 컴포넌트를 위한 HOC로 원하는 함수형 컴포넌트를 감싸서 사용한다.

const ExampleComponent=memo(({ crying }: TCryingProps) => {
  return <p data-testid='dog'>강아지 "{crying}"</p>;
});

props 비교, state 비교

PureComponent는 props, state를 모두 비교하여 하나라도 변경되면 리랜더링 된다. React.memo는 props 만 비교하여 이전과 다르면 리랜더링 된다.

PureComponent는 React.memo를 사용해서 class component에서 함수형 컴포넌트로 변환이 가능하다.

공식문서의 예시를 참조해보자.

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

위의 예시처럼 하면 변환을 할 수 있다.

실제 실무나 코드 짤 때 기억하고 있다가 불필요한 리랜더링이 일어날때 적용해봐야겠다.!.