useMemo를 사용해 함수 최적화

useMemo는 계산 비용이 높은 값을 캐싱시켜 렌더링마다 실행되는 것을 방지하고, 의존성 배열이 바뀔 때만 연산 되도록 하는 리액트 훅 입니다.

1. useMemo 사용법

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

function ExpensiveComponent() {
  const [number, setNumber] = useState(1);
  const [text, setText] = useState('');

  // 계산 비용이 높은 함수라고 가정
  const getFactorial = (n) => {
    console.log('📌 무거운 계산 실행 중...');
    if (n === 0) return 1;
    return n * getFactorial(n - 1);
  };

  // number가 바뀔 때만 연산 수행
  const factorial = useMemo(() => getFactorial(number), [number]);

  return (
    <div>
      <h2>Factorial of {number}: {factorial}</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(Number(e.target.value))}
      />
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="이건 계산에 영향을 주지 않음"
      />
    </div>
  );
}

param 인 a, b값이 동일 할 경우, 이전의 캐싱 데이터를 사용한다.