[React] 9. useMemo (최적화)

useMemo (Memoization)

최초로 계산하였을 때의 값을 메모리에 저장하고 동일한 계산에 대해서 각자 계산하는게 아닌 첫 번째 계산한 후 저장한 메모리에서 가져옴
-> 불필요한 연산을 방지해줌(연산 줄임)

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


function Exam() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(1);

  // 복잡한 연산
  const expensiveCalculation = (num) => {
    console.log("⚡ 계산 중...");
    let result = num * 2;
    for (let i = 0; i < 1000000000; i++) // 3초
    return result;
  };

  // value 변경 시만 연산 실행
  const memoizedValue = useMemo(() => expensiveCalculation(value), [value]);

  return (
    <div>
      <h2>계산된 값: {memoizedValue}</h2>
      <button onClick={() => setValue(value + 1)}>값 변경</button>
      <button onClick={() => setCount(count + 1)}>카운트 변경 ({count})</button>
    </div>
  );
}
export default Exam;

useMemo 에서 첫 번째 인자는 렌더링 할 때 쓸 함수 , 두 번째 인자는 의존성 배열로

동작 할 함수는 첫 번째 , 어떤 값이 변경 될 때 연산 할 지는 두 번째에 넣으면 된다 .

이렇게 하면 동일한 동작에 대해 처음에만 계산을 하고 이후에는 useMemo를 통해 저장된 내용에서 가져오게 된다.