useMemo는 React에 성능 최적화를 위해 사용하는 훅이다.
useMemo를 사용하면 컴포넌트가 다시 렌더링 될 때마다 불필요한 비용이 드는 연산을 반복하는 것을 줄일 수 있다.
사용법
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);- 첫 번째 인자로 비싼 연산을 하는 함수가 들어간다.
- 두 번째 인자로 배열에 deps 혹은 의존성 배열이 들어가는데, 이 연산이 다시 실행될 때 참조해야 할 값들이 들어간다.
동작 방식
- 리액트는 컴포넌트가 렌더링될 때 useMemo 안에 있는 함수를 실행하고, 그 결과를 캐싱한다.
- 만약 의존성 배열에 들어간 값들이 변하지 않으면, 이전에 계산된 값을 그대로 재사용한다.
(배열의 값들이 변하면 새로운 값을 계산한다.)
import React, { useMemo } from 'react';
function MyComponent({ a, b }) {
// a와 b가 변경되지 않으면 이전에 계산된 값 사용
const expensiveValue = useMemo(() => {
console.log("비싼 연산 중...");
return a + b; // 예를 들어 복잡한 연산
}, [a, b]);
return (
<div>
<p>계산된 값: {expensiveValue}</p>
</div>
);
}
위 코드에서 a와 b가 변경되지 않는다면 "비싼 연산 중..."은 콘솔로 다시 찍히지 않는다.
즉, expensiveValue 가 다시 계산되지 않고, 이전의 계산된 결과를 재사용한다.
결론은 연산 비용이 정말 크거나, 성능 문제가 발생할 때 사용하는 것이 좋다!
굿