useMemo

의미

💡 특정 값을 재사용하고자 할 때 사용하는 Hook
💡 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용

Memoization
기존에 수행한 연산의 결과값을 메모리에 저장을 해두고,
동일한 입력이 들어오면 재활용하는 프로그래밍 기법

적용

import { useMemo } from "react";

export default function App() {
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  
  const add = (num1, num2) => {
    return Number(num1) + Number(num2);
  };
  
  const answer = useMemo(() => add(val1, val2), [val1, val2]);
  
  return (
    <div>
      <input
        value={val1}
        type="number"
        onChange={(e) => setVal1(Number(e.target.value))}
      />
      <input
        value={val2}
        type="number"
        onChange={(e) => setVal2(Number(e.target.value))}
      />
      <div>{answer}</div>
    </div>
  );
}