useMemo

 

🎯 useMemo란 무엇일까?

**useMemo**는 값을 계산할 때 불필요한 반복 계산을 막아주는 도구예요.
쉽게 말해, **"필요할 때만 계산하고, 값이 변하지 않으면 이전 결과를 재사용"**해요.

 

🧮 계산 이야기로 이해하기

여러분이 수학 숙제를 한다고 상상해보세요.
어떤 수학 문제의 답을 한 번 계산했는데, 친구가 또 같은 문제를 물어보면 다시 계산할 필요가 없겠죠?

• 답을 기억해뒀다가 친구에게 바로 알려주면 돼요.

React에서도 마찬가지예요.
복잡한 계산이 매번 실행되면 성능이 떨어질 수 있으니까, 값이 바뀌지 않는 한 계산을 건너뛰고 결과를 재사용하는 거예요.
이 역할을 하는 게 바로 **useMemo**입니다! 🚀

 

🛠️ useMemo 기본 예제

아래는 간단한 예제예요.
입력값에 따라 복잡한 계산을 처리한다고 가정해볼게요.

import React, { useState, useMemo } from "react";

function ExpensiveCalculation({ num }) {
  console.log("복잡한 계산 실행 중... 🔄");
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += num; // 큰 숫자를 반복해서 더해요 (시간이 걸리는 작업)
  }
  return result;
}

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState(1);

  // useMemo를 사용해 복잡한 계산을 최적화
  const calculatedValue = useMemo(() => ExpensiveCalculation({ num: input }), [input]);

  return (
    <div>
      <h1>useMemo 예제</h1>
      <p>복잡한 계산 결과: {calculatedValue}</p>
      <button onClick={() => setCount(count + 1)}>카운터 증가: {count}</button>
      <input
        type="number"
        value={input}
        onChange={(e) => setInput(Number(e.target.value))}
      />
    </div>
  );
}

export default App;

 

🔍 코드에서 무슨 일이 일어날까요?

1. ExpensiveCalculation 함수
   • 입력값에 따라 매우 복잡하고 시간이 오래 걸리는 계산을 합니다.
2. useMemo로 계산 결과 저장
   • useMemo는 input 값이 바뀔 때만 ExpensiveCalculation을 실행해요.
   • input 값이 그대로라면 이전에 계산된 결과를 재사용합니다.
3. 카운터 버튼 클릭
   • count 상태가 바뀌어도 input 값이 바뀌지 않으면 계산을 다시 실행하지 않아요.

⏳ useMemo를 사용하지 않은 경우

만약 useMemo를 사용하지 않았다면?

• count 버튼을 클릭할 때마다 불필요하게 복잡한 계산이 실행됩니다.
• 입력값 input이 바뀌지 않았는데도 매번 계산을 새로 하니까 성능이 떨어질 수 있어요.

 

🚀 useMemo의 장점

1. 불필요한 계산을 피할 수 있어요.
   • 계산에 시간이 오래 걸리는 작업일 때 성능 최적화에 효과적이에요.
2. 값이 바뀔 때만 다시 계산
   • 의존성 배열(위 예제의 [input])에 있는 값이 바뀌지 않으면 기존 결과를 재사용합니다.
3. React 컴포넌트의 성능 향상
   • 계산을 최소화해서 화면 렌더링이 더 빨라져요.

 

🧩 useMemo를 사용할 때 주의할 점

1. 모든 계산에 사용할 필요는 없어요.
   • useMemo는 복잡한 계산을 최적화할 때 사용하면 좋아요.
   • 간단한 계산에는 오히려 불필요한 코드가 될 수 있어요.
2. 의존성 배열을 정확하게 설정해야 해요.
   • [input]처럼 어떤 값이 바뀔 때 다시 계산할지 정확히 지정해야 합니다.

 

🌟 한 줄 요약

useMemo는 불필요한 반복 계산을 막고, 값이 변할 때만 계산을 실행해 성능을 최적화해주는 훅이에요.