React 애플리케이션을 개발할 때, 계산 비용이 높은 작업을 효율적으로 처리하고 성능을 최적화하는 것은 중요합니다. useMemo 훅을 사용하면 계산 비용이 높은 작업의 결과를 캐싱하고, 해당 결과가 변경되지 않는 한 새로 계산하지 않도록 도와줍니다. 이를 통해 컴포넌트의 렌더링 성능을 향상시킬 수 있습니다.
숫자 배열의 합 계산하기
우선, 다음과 같이 React 컴포넌트를 만들어보겠습니다.
import React, { useState, useMemo } from 'react';
function SumCalculator({ numbers }) {
// 숫자 배열의 합을 계산하여 캐싱
const sum = useMemo(() => {
console.log('계산이 수행됨'); // 계산이 수행될 때 콘솔에 출력
return numbers.reduce((acc, num) => acc + num, 0);
}, [numbers]); // numbers 배열이 변경될 때만 재계산
return (
<div>
<p>숫자 배열: {numbers.join(', ')}</p>
<p>배열 합: {sum}</p>
</div>
);
}
SumCalculator 컴포넌트는 numbers 배열을 받아 배열의 합을 계산하고 캐싱합니다. useMemo를 사용하여 합을 계산하고, numbers 배열이 변경될 때만 재계산되도록 설정했습니다.
숫자 배열에 랜덤 숫자 추가하기
이제 위에서 만든 SumCalculator 컴포넌트를 사용하는 App 컴포넌트를 만들어보겠습니다.
function App() {
const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);
const addRandomNumber = () => {
const randomNumber = Math.floor(Math.random() * 10) + 1;
setNumbers([...numbers, randomNumber]);
};
return (
<div>
<h1>숫자 배열 합계 계산</h1>
<button onClick={addRandomNumber}>랜덤 숫자 추가</button>
<SumCalculator numbers={numbers} />
</div>
);
}
App 컴포넌트에서는 “랜덤 숫자 추가” 버튼을 클릭하면 numbers 배열에 랜덤한 숫자를 추가하는 기능을 제공합니다. 하지만 합계를 계산하는 SumCalculator 컴포넌트는 numbers 배열이 변경되지 않는 한 캐싱된 값을 사용하므로, 숫자를 추가해도 불필요한 재계산이 발생하지 않습니다.
결론
React의 useMemo 훅은 계산 비용이 높은 작업을 최적화하는 데 유용한 도구입니다. 컴포넌트의 성능을 향상시키고 불필요한 재계산을 방지하기 위해 useMemo를 적절히 활용하면 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 코드의 성능을 개선하고자 할 때, useMemo를 고려해보세요.
이제 useMemo를 사용하여 React 애플리케이션의 성능을 최적화하는 방법에 대한 기본적인 이해를 얻었습니다. 이를 활용하여 더 큰 규모의 프로젝트에서 성능을 향상시킬 수 있을 것입니다.