[React] memo useMemo useCallback 차이와 사용 판단법

 

React에서 제공하는 주요 성능 최적화 Hook들의 특징과 사용법을 알아봅니다.

 

memo

컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링을 방지합니다.

 

부모 컴포넌트가 정상적으로 다시 리랜더링 된 후, 자신의 리랜더링 차례가 됬을 때,

리랜더링 전후 props를 비교하여 동일하면 (배열이거나 객체이면 얕은 비교만 수행합니다) 리랜더링을 하지 않습니다.

 

기본 문법

const MyComponent = React.memo(function MyComponent(props) {
  // 컴포넌트 로직
});

사용 예시

import React from 'react';

const Counter = ({ count }) => {
  return <div>{count}</div>;
};

export default React.memo(Counter);;

 

useMemo

 

계산 비용이 큰 값을 메모이제이션합니다.

기본 문법

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

사용 예시

import { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
  return data.map(item => expensive_calculation(item));
}, [data]);

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

 

useCallback

 

함수를 메모이제이션하여 불필요한 재생성을 방지합니다.

 

기본 문법

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },[a, b]
);

사용 예시

import { useCallback } from 'react';

function ParentComponent() {
	const handleClick = useCallback(() => {
		console.log('Button clicked!');
	}, []); // 의존성 없음
return <ChildComponent onClick={handleClick} />;
}

 

사용 시기

 

memo

• 부모 컴포넌트가 자주 업데이트되는 경우
• props가 자주 변경되지 않는 컴포넌트
• 상위 트리에 있는 컴포넌트
• 렌더링 비용이 큰 컴포넌트

useMemo

• 복잡한 계산이 필요한 경우
• 객체나 배열을 새로 생성하는 것을 방지해야 할 때
• 참조 동일성이 중요한 경우

useCallback

• 자식 컴포넌트에 콜백 함수를 props로 전달할 때
• useEffect의 의존성 배열에 함수를 포함시켜야 할 때
• 함수의 참조 동일성이 중요한 경우

 

주의사항

1. 과도한 최적화 주의
   • 모든 컴포넌트에 적용할 필요 없음
   • 실제 성능 문제가 있는지 확인 후 적용
2. 의존성 배열 관리
   • 잘못된 의존성 설정은 버그 유발 가능
   • 필요한 의존성을 모두 포함해야 함
3. 성능 측정
   • React DevTools의 Profiler 활용
   • 실제 성능 향상 여부 확인

 

참고 자료

• React 공식 문서
• React 성능 최적화