React.memo란?

React.memo는 React에서 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용하는 고차 컴포넌트(Higher Order Component, HOC)이다.

React.memo는 함수형 컴포넌트의 props가 변경되지 않았을 때 컴포넌트를 다시 렌더링하지 않고 이전에 렌더링된 결과를 재사용한다. 이는 성능 최적화를 위해 유용하다.

 

기본적인 React.memo 사용법

React.memo는 함수형 컴포넌트를 인자로 받아서, 리렌더링 조건을 자동으로 최적화하거나, 커스터마이즈할 수 있는 고차 컴포넌트로 감싸준다.

const MemoizedComponent = React.memo(OriginalComponent);

import React from "react";

const MyComponent = ({ value }) => {
  console.log("렌더링: ", value);
  return <div>{value}</div>;
};

// React.memo로 감싸기
const MemoizedMyComponent = React.memo(MyComponent);

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <MemoizedMyComponent value="변하지 않는 값" />
    </div>
  );
}

 

• React.memo는 기본적으로 props를 얕게 비교 한다.
• props가 이전과 동일하다면, 해당 컴포넌트는 렌더링을 건너뛴다.
• count가 증가해도 MemoizedMyComponent는 props.value가 변하지 않았으므로 재렌더링되지 않는다.

 

---

React.memo 동작 원리

1. React.memo는 기본적으로 얕은 비교를 사용하여 이전 props와 새 props를 비교한다.

변경된 props가 없으면 컴포넌트를 리렌더링하지 않는다.

 

2. 내부적으로 React.memo는 다음과 같이 동작한다.

if (Object.is(prevProps, nextProps)) {
  // 이전 props와 새로운 props가 같으면 재렌더링하지 않음
  return false;
}

 

---

React.memo에 커스터마이징한 비교 함수 추가

React.memo는 기본적으로 얕은 비교를 사용하지만, 필요에 따라 커스터마이징할 수 있다.

const MemoizedComponent = React.memo(Component, areEqual);

 

areEqual : 이전 props와 새 props를 비교하는 함수이다. 두 값이 같으면 true, 다르면 false를 반환해야 한다.

 

커스터마이징

const MyComponent = ({ user }) => {
  console.log("렌더링: ", user.name);
  return <div>{user.name}</div>;
};

const areEqual = (prevProps, nextProps) => {
  return prevProps.user.name === nextProps.user.name;
};

// React.memo에 비교 함수 전달
const MemoizedMyComponent = React.memo(MyComponent, areEqual);

export default function App() {
  const [count, setCount] = React.useState(0);
  const user = { name: "John" };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <MemoizedMyComponent user={user} />
    </div>
  );
}

 

count가 증가해도 user.name이 변경되지 않았기 때문에 MemoizedMyComponent는 재렌더링되지 않는다.

 

---

주의 사항

1. React.memo로 모든 컴포넌트를 감싸면 오히려 성능이 나빠질 수 있다.

• 비교 작업(얕은 비교 또는 커스텀 비교 함수)에 비용이 들기 때문에 props가 자주 변하는 경우 오히려 성능이 저하될 수 있다.
• 따라서 비교 비용보다 리렌더링 비용이 높은 경우에만 사용하는 것이 좋다.

2. React.memo는 함수형 컴포넌트에서만 사용 가능

• 클래스형 컴포넌트는 PureComponent를 사용해야 한다.

3. 컴포넌트 내부 상태와는 관계없다,

• React.memo는 props 변경만 확인하며, 컴포넌트 내부 상태(useState, useReducer 등) 변경에는 영향을 미치지 않는다.