리액트의 useMemo: 성능 최적화(연산 결과 재사용)

소개

리액트에서 성능 최적화는 항상 중요한 고려 사항 중 하나입니다.

이에 따라 useMemo 훅이 등장했는데,

이 글에서는 useMemo의 기본적인 개념부터 사용법과 성능 최적화에 대해 간단히 알아보겠습니다.

1. useMemo란?

useMemo는 리액트 훅 중 하나로,

계산 비용이 많이 드는 함수의 결과 값을 기억(메모이제이션)하고

해당 값이 필요할 때만 다시 계산하여 성능을 최적화하는 데 사용됩니다.

 

기본 구문은 다음과 같습니다

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

위 코드에서 computeExpensiveValue 함수는 a와 b의 값이 변경될 때만 다시 실행되며,

그 외의 경우에는 이전에 계산된 값을 반환합니다.

2. useMemo의 사용법

useMemo는 첫 번째 인자로 콜백함수를 받아서 콜백 함수가 리턴하는 값을(연산을) 최적화할 수 있도록 도와주고

두 번째 인자로 dependency array (useEffect와 동일한 배열)를 전달하여

배열의 값이 변화할 때만 useMemo의 첫번째 인자로 전달한 콜백함수가 다시 수행됩니다.

쉽게 말해서 return을 가지고 있는 함수를 memoization해서 연산을 최적화합니다.

배열의 값이 변화하지 않는 이상 똑같은 return을 계산하지 않고 반환합니다.(memoization)

useMemo는 콜백함수가 리턴하는 값을 리턴합니다.

import { useMemo, useState } from "react";
const App = () => {
const [data, setData] = useState([]);
const getDiaryAnalysis = useMemo(() => {
    console.log("useMemo 실행");

    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;

    return { goodCount, badCount, goodRatio };
  }, [data.length]);

  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;
  
  return (
    <div className="App">
      <div>전체 일기 : {data.length}</div>
      <div>기분 좋은 일기 개수 : {goodCount}</div>
      <div>기분 나쁜 일기 개수 : {badCount}</div>
      <div>기분 좋은 일기 비율 : {goodRatio}</div>
    </div>
  );
}
export default App;

위 코드에서 useMemo의 두번째 인자인 data.length가 변할 때만

useMemo의 첫번째 인자 콜백함수가 실행됩니다.

data.length가 변경되지 않으면 기존에 연산했던 결과를 가져다 쓰기 때문에 성능이 좋아집니다.(memoization)

3. useMemo의 성능 최적화 활용

>> 랜더링 성능 최적화 및 불필요한 계산 방지

useMemo는 불필요한 랜더링을 방지하여 성능을 최적화하는 데에 효과적입니다.

특히 계산 비용이 많이 드는 연산의 경우

useMemo를 통해 불필요한 계산을 방지하여 애플리케이션의 전반적인 성능을 향상시키고

랜더링이 빈번하게 발생하지 않도록 제어할 수 있습니다.

4. 주의사항

4.1. 무분별한 사용 주의

useMemo를 무분별하게 사용하면 오히려 성능을 저하시킬 수 있습니다.

항상 성능 측정과 함께 사용하고, 실제로 성능 이슈가 발생하는 상황에서만 적용하는 것이 좋습니다.

4.2. 의존성 배열 관리(dependency array)

useMemo 내의 의존성 배열을 정확하게 관리해야 합니다.

필요한 값들만 의존성 배열에 포함하여 최적의 성능을 얻을 수 있습니다.

마무리

useMemo는 리액트에서 성능 최적화를 위해 필수적인 훅 중 하나입니다.

적절한 상황에서 사용하면 불필요한 계산을 피하고 랜더링 성능을 향상시킬 수 있습니다.

하지만 사용 시 주의해야 할 점들도 있으므로,

프로젝트의 성격과 상황에 맞게 활용하는 것이 중요합니다.