[React] UseMemo란?
리액트 useMemo란?
useMemo는 리액트에서 제공하는 훅(Hook) 중 하나로, 컴포넌트의 성능을 최적화하기 위해 사용됩니다.
주로 계산 비용이 높은 연산의 결과를 저장하고 재사용하거나, 객체/배열 등 참조형 데이터의 동일성 유지가 필요할 때 활용합니다.
복잡하거나 무거운 연산을 매 렌더링마다 반복하고 싶지 않을 때, 그리고 객체, 배열, 함수 등의 참조값이 매번 새로 만들어져서 불필요한 렌더링이 발생할 때 사용할 수 있습니다.
기본 문법
const memoizedValue = useMemo(() => {
// 계산이 많이 드는 함수 실행 또는 객체/배열 생성
return expensiveFunction(a, b);
}, [a, b]);- 첫 번째 인자: 메모이제이션할 함수(콜백). 이 함수의 반환값이 저장됩니다.
- 두 번째 인자: 의존성 배열. 배열 안의 값이 바뀔 때만 첫 번째 함수가 다시 실행되어 값을 갱신합니다. 값이 바뀌지 않으면 이전에 저장한 값을 재사용합니다.
예시
계산 비용이 높은 함수의 결과 저장
import React, { useMemo, useState } from 'react';
function ExpensiveComponent() {
const [count, setCount] = useState(0);
// 비용이 많이 드는 함수
const expensiveCalculation = (num) => {
console.log('Calculating...');
return num * 2; // 실제로는 더 복잡한 연산이라고 가정
};
// useMemo로 결과 저장
const calculatedValue = useMemo(
() => expensiveCalculation(count),
[count]
);
return (
<div>
<p>Count: {count}</p>
<p>Calculated Value: {calculatedValue}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}count가 바뀔 때만expensiveCalculation이 실행되고, 그렇지 않으면 이전 결과를 재사용합니다.
참조 동일성 유지(불필요한 렌더링 방지)
const memoizedObject = useMemo(() => ({ a: 1, b: 2 }), []);- 빈 배열(
[])을 의존성으로 넣으면 컴포넌트가 처음 마운트될 때 한 번만 실행되고, 이후에는 같은 객체 참조가 유지됩니다. - 이 패턴은 자식 컴포넌트에 객체/배열을 props로 넘길 때 불필요한 렌더링을 막는 데 유용합니다.
정리
- useMemo는 값(연산 결과, 객체, 배열 등)을 메모이제이션하여, 의존성 배열의 값이 바뀔 때만 다시 계산합니다.
- 주로 비용이 큰 연산의 최적화 또는 참조 동일성 유지가 필요할 때 사용합니다.
- 의존성 배열을 올바르게 설정하는 것이 중요합니다. 잘못 설정하면 값이 갱신되지 않거나, 불필요한 계산이 반복될 수 있습니다.
useMemo를 적절히 활용하면 리액트 앱의 불필요한 연산과 렌더링을 줄여 성능을 최적화할 수 있습니다.
728x90
'React' 카테고리의 다른 글
| [React] Props(프롭스)란? (0) | 2025.05.28 |
|---|---|
| [React] 리액트 타입 연결하기 (0) | 2025.05.28 |
| [React] UseState란? (0) | 2025.05.27 |
| [React] React Router 설정방법 (2) | 2025.05.21 |
| [React] Vite로 프론트엔드 프로젝트 시작하기 (0) | 2025.05.08 |