안녕하세요 lika-7입니다
이번시간에는 react hook 중 useMemo에 대해서 설명하겠습니다
useMemo란
useMemo는 React에서 제공하는 훅 중 하나로, 성능 최적화와 계산 비용을 줄이기 위해 사용됩니다. 이 훅은 주로 연산 비용이 높은 함수나 연산을 수행할 때 사용됩니다.
useMemo는 두 개의 인수를 가지며 다음과 같은 역할을 수행합니다:
- 첫 번째 인수: 계산할 함수 또는 값입니다.
이 함수 또는 값은 useMemo의 두 번째 인수인 종속성 배열이 변경될 때에만 다시 계산됩니다.
종속성 배열에 있는 값이 변경되지 않는 한, useMemo는 캐시된 값을 반환합니다.
- 두 번째 인수 (종속성 배열): useMemo가 다시 계산되어야 하는 조건을 정의하는 배열입니다.
이 배열에 포함된 값들 중 하나라도 변경될 때, useMemo의 첫 번째 인수로 전달된 함수 또는 값이 다시 계산됩니다.
useMemo는 다음과 같은 상황에서 유용합니다:
- 렌더링 과정에서 반복적으로 계산하는 비용이 높은 작업, 예를 들면 배열의 필터링 또는 정렬.
- 컴포넌트 내에서 동일한 결과를 얻으려면 반복적으로 계산하는 계산 비용이 높은 연산.
- 렌더링 시 불필요한 계산을 방지하고, 애플리케이션의 성능을 향상시키기 위한 목적.
예를 들어, useMemo를 사용하여 계산 비용이 높은 함수의 결과를 캐싱하고, 종속성 배열에 변경을 감지할 값들을 넣어 성능을 최적화할 수 있습니다.
jsxCopy code
import { useMemo } from 'react';
function MyComponent({ list }) {
const sortedList = useMemo(() => {
// list를 정렬하는 비용이 높은 연산
return list.sort((a, b) => a - b);
}, [list]);
return (
<ul>
{sortedList.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
✅
위 예제에서, sortedList는 list 배열의 정렬 결과를 캐싱하며, list가 변경될 때만 다시 정렬 연산이 수행됩니다. 이렇게 함으로써 렌더링 시 불필요한 비용을 줄이고 성능을 향상시킬 수 있습니다.
