다음은 Christian Ekrem의 블로그 글 React.memo Demystified: When It Helps and When It Hurts의 핵심 내용을 정리한 것입니다. React 성능 최적화에 관심 있는 개발자라면 노션 등에 정리해두기 좋은 내용입니다.(cekrem.github.io)

🧠 핵심 요약

1. React.memo의 역할과 한계

• React.memo는 컴포넌트의 props가 변경되지 않으면 리렌더링을 방지합니다.
• 하지만 props가 참조값(객체, 배열, 함수 등)일 경우, 참조가 변경되면 리렌더링이 발생합니다.
• 따라서 props로 전달되는 객체나 함수를 useMemo 또는 useCallback으로 메모이제이션하여 참조를 유지해야 합니다.

예시 코드:

const MemoizedChild = React.memo(({ data, onClick }) => {
  // ...
});

function ParentComponent() {
  const data = useMemo(() => ({ value: 42 }), []);
  const onClick = useCallback(() => console.log("clicked"), []);

  return <MemoizedChild data={data} onClick={onClick} />;
}

2. React.memo 사용 시 주의할 점

• props 스프레딩 문제: 부모 컴포넌트에서 props를 스프레딩하여 자식 컴포넌트에 전달하면, 불필요한 리렌더링이 발생할 수 있습니다.

문제 코드:

const Child = React.memo(({ data }) => {
  // ...
});

function Parent(props) {
  return <Child {...props} />;
}

• children prop 문제: JSX로 작성된 children은 매 렌더링마다 새로운 참조를 가지므로, React.memo가 효과적이지 않을 수 있습니다.

해결 방법:

const MemoComponent = React.memo(({ children }) => {
  // ...
});

function Parent() {
  const content = useMemo(() => <div>Some content</div>, []);

  return <MemoComponent>{content}</MemoComponent>;
}

• 중첩된 React.memo 컴포넌트 문제: 중첩된 React.memo 컴포넌트에서도 자식 컴포넌트의 참조가 변경되면 부모 컴포넌트의 리렌더링이 발생할 수 있습니다.

해결 방법:

const InnerChild = React.memo(() => <div>Inner</div>);
const OuterChild = React.memo(({ children }) => <div>{children}</div>);

function Parent() {
  const innerChild = useMemo(() => <InnerChild />, []);

  return <OuterChild>{innerChild}</OuterChild>;
}

3. React.memo, useMemo, useCallback의 사용 시점