[React] useMemo()와 React.memo의 차이점

useMemo()와 React.memo는 React의 성능 최적화를 위해 사용되는 두 가지 도구이다.

useMemo()

계산 비용이 높은 함수의 반환값을 캐시하여, 같은 인자가 전달될 경우 다시 계산하지 않고 캐시된 값을 반환한다. 이를 통해 불필요한 계산을 줄이고 컴포넌트의 렌더링 성능을 개선할 수 있다.

예시

import { useMemo } from 'react';

function MyComponent(props) {
  const { data } = props;

  // data 값이 변경될 때마다 data의 길이를 계산하고, 
  // 그 값을 캐시하여 같은 data가 전달될 때 재사용합니다.
  const dataLength = useMemo(() => data.length, [data]);

  return <div>{dataLength}</div>;
}

 

React.memo

함수형 컴포넌트를 memoization(메모이제이션)하여, 이전에 렌더링한 결과를 재사용하여 불필요한 렌더링을 방지한다. 즉, 같은 props로 렌더링될 때, 이전에 렌더링한 결과를 재사용하여 컴포넌트를 다시 렌더링하지 않는다.

예시

import React from 'react';

const MyComponent = React.memo(function(props) {
  const { data } = props;

  return <div>{data}</div>;
});

 

두 도구의 차이점은 사용하는 시점과 적용 대상이다. useMemo()는 특정 값을 캐싱하기 위해 사용되며, 컴포넌트 내에서 사용된다. 반면에 React.memo는 함수형 컴포넌트 자체를 memoization하기 때문에, 컴포넌트 자체를 감싸서 사용한다.

따라서, useMemo()는 특정 값이 변경될 때마다 새로 계산해야 하는 상황에서 사용하며, React.memo는 props가 변경될 때마다 불필요한 렌더링을 방지하고자 할 때 사용한다.