[React] useMemo란?

📋 useMemo란?

useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 hook으로 memo는 memoization의 줄임말로 '메모리에 넣기'라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

---

따라서 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

import { useState } from "react";
 
const hardCalculate = (number) => {
  console.log("어려운 계산!");
  for (let i = 0; i < 99999999; i++) {} // 생각하는 시간
  return number + 10000;
};

const easyCalculate = (number) => {
  console.log("쉬운 계산!");
  return number + 1;
};

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = hardCalculate(hardNumber);
  const easySum = easyCalculate(easyNumber);

  return (
    <div>
      <h3>어려운 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => setHardNumber(parseInt(e.target.value))}
      />
      <span> + 10000 = {hardSum}</span>
      
      
      <h3>쉬운 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => setEasyNumber(parseInt(e.target.value))}
      />
      <span> + 1 = {easySum}</span>
    </div>
  );
}

export default App;

어려운 계산기는 반복문을 99999999번 돌린 후 값을 반환하기 때문에 숫자 변경 시 누르면 1초 정도의 딜레이를 거친 후 값이 변경된다. 쉬운 계산기의 값을 변경해도 1초 정도의 딜레이를 거친 후 값이 변경된다.

이유는 쉬운 계산기의 input 값을 변경하면 함수형 컴포넌트인 App이 ReRendering 되는데, 내부의 변수들이 초기화되기 때문에 hardCalculate가 다시 실행되기 때문이다.

✨ useMemo를 통해 프로그램 실행 속도를 향상시켜 보자 !

const hardSum = useMemo(() => {
	return hardCalculate(hardNumber);
}, [hardNumber]);

const easySum = easyCalculate(easyNumber);

useMemo의 첫번째 인자로 callback 함수를 넣고, 의존성 배열 안에 hardNumber를 넣어 hardNumber 값이 변경될 때만 callback 함수가 실행되게 하면 된다.