useMemo

useMemo

1. useMemo

 - React의 훅 중 하나로, 성능 최적화를 위해 사용

 - 계산 비용이 높은 함수 결과를 이전 계산 결과와 비교해, 이전 결과와 동일하다면 이를 재사용하여, 렌더링 성능 향상

 

2. useMemo 구문

    - dependency 들은 이 함수가 의존하는 값들을 나타냄.

        → 의존성 값들이 변경되었을 때만 다시 실행되고, 그렇지 않으면 계산한 결과를 재사용

const memoizedValue = useMemo(() => {
  // 계산 비용이 높은 작업 수행
  return result;
}, [dependency1, dependency2, ...]);

 

3, 예시

 - App.js

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

import "./App.css";

function isPrimeNumber(no) {
  for (let i = 2; i < no; i++) {
    if (i * i > no) {
      break;
    }

    if (no % i == 0) {
      return false;
    }
  }

  return true;
}

function getPrimeNumbers(max) {
  const primeNumbers = [];

  for (let i = 2; i <= max; i++) {
    if (isPrimeNumber(i)) {
      primeNumbers.push(i);
    }
  }

  return primeNumbers;
}

function getPrimeNumbersCount(max) {
  return getPrimeNumbers(max).length;
}

let AppCallCount = 0;

function App() {
  AppCallCount++;
  console.log(`AppCallCount : ${AppCallCount}`);

  const [inputedNo, setInputedNo] = useState(0);
  const [no, setNo] = useState(0);
  const primeNumbersCount = useMemo(
    () => getPrimeNumbersCount(inputedNo),
    [inputedNo]
  );

  const onSubmit = (e) => {
    e.preventDefault();

    const form = e.target;
    form.number.value = form.number.value.trim();

    if (form.number.value.length == 0) {
      alert("숫자를 입력해주세요.");
      form.number.focus();
      return;
    }

    const number = form.number.valueAsNumber;
    form.number.focus();

    setInputedNo(number);
  };

  return (
    <>
      <button
        onClick={() => {
          setNo(no + 1);
        }}
      >
        번호 : {no}
      </button>
      <form onSubmit={onSubmit}>
        <input type="number" name="number" placeholder="숫자를 입력해주세요." />
        <input type="submit" value="확인" />
        <hr />
        <div>MAX : {inputedNo}</div>
        <div>소수의 개수 : {primeNumbersCount}</div>
      </form>
    </>
  );
}

export default App;

 

 - 결과

    - 계산 비용이 높은 결과를 출력하면, 어느 정도 시간이 발생

    - 평소라면, '번호' 버튼을 클릭 시, 계속 리랜더링하여, 효율성이 떨어짐

    - useMemo를 사용하여, 계산 결과값을 재사용해 렌더링 성능이 향상됨