[React] memo

Byeonghyeon·2025년 1월 19일

공부

목록 보기

12/21

memo

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

React.memo를 사용하면, 부모 컴포넌트가 리렌더링되더라도 props가 변경되지 않았다면 자식 컴포넌트의 리렌더링을 막을 수 있다.

memo(Component, arePropsEqual?)

매개변수

Component : 메모(Memorize)하려는 컴포넌트. memo는 이 컴포넌트를 수정하지 않고 대신 새로운 메모된 컴포넌트를 반환한다.
optional arePropsEqual : 컴포넌트의 이전 Props와 새로운 Props의 두 가지 인수를 받는 함수. 이전 Props와 새로운 Props가 동일한 경우, 컴포넌트가 이전 Props와 동일한 결과를 렌더링하고 새로운 Props에서도 이전 Props와 동일한 방식으로 동작하는 경우 true를 반환해야 한다. 그렇지 않으면 false를 반환해야 한다. 일반적으로 이 함수를 지정하지 않는다.

반환값

memo는 새로운 React 컴포넌트를 반환한다. memo에 제공한 컴포넌트와 동일하게 동작하지만, 부모가 리렌더링되더라도 Props가 변경되지 않는 한 React는 이를 리렌더링하지 않는다.

기본 사용법

import React from 'react';

const MyComponent = (props) => {
  console.log('컴포넌트 렌더링');
  return <div>{props.value}</div>;
};

// React.memo로 최적화
export default React.memo(MyComponent); // props가 이전과 동일하다면 렌더링 생략

주요 특징

React.memo는 얕은 비교를 사용하여 이전과 현재의 props를 비교한다.
props가 객체, 배열일 경우 참조 값이 다르면 React.memo가 작동하지 않을 수 있다. 이를 해결하기 위해 useMemo나 useCallback을 사용해 참조를 고정해야 한다.