React.memo로 불필요한 렌더 줄이기

React에서 제공하는 API 중 하나인 memo

import { memo } from 'react';

function MyComponent() {
	return <div>Hello World</div>
}

const MemoizedMyComponent = memo(MyComponent)

memo(Component, arePropsEqual?)
첫번째 인자: 리액트 컴포넌트
두번째 인자(옵셔널): 디폴트로 이전 props와 새 props가 같으면 true를 리턴한다. 즉 true를 리턴하는 경우 리렌더를 수행하지 않는다. 리액트는 여기서 이전 props와 새 props를 비교할 때 Object.is 메서드를 사용한다. 일반적인 경우에는 두번째 인자를 넘기지 않는다.

memo를 사용하면 넘어오는 props가 바뀌는 경우에만 리렌더가 되고, 다른 경우에는 리렌더가 되지 않도록 하여 불필요한 렌더를 줄일 수 있다. 하지만 모든 경우에 100% 리렌더를 방지한다고 보장할 수 없다고 도큐먼트에 명시되어 있다.

memo를 사용한 컴포넌트는 부모의 props가 바뀌지 않으면 리렌더를 하지 않지만 자기 자신의 state가 바뀌면 리렌더를 한다. 헷갈리지 말자. memo API에서 지원하는 memoization은 부뫄와 자식 간의 props 전달 테크닉에 해당된다.

Object.is는 Object를 비교하는 것이기 때문에 메모리 주소가 다르면 false라고 판단한다.Object.is(3, 3)은 true이고 Object.is({}, {})는 false이다.
따라서 memo의 장점을 최대로 살리려면 부모 컴포넌트에서 넘기는 props가 불필요하게 재정의되는 일을 줄이기 위해 useMemo를 같이 활용하는 것이 좋다.

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo( // 부모 영역에서 memoized 된 값
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) { // props가 memoized되어 넘어가기 때문에 불필요한 렌더를 줄일 수 있다.
  // ...
});

참고한 사이트

https://react.dev/reference/react/memo#memo