useMemo 란?

react에서 페이지의 성능 최적화하는 방법

useMemo 를 사용하는경우

Memo ⇒ memoizaion 이란 뜻으로 해석하면 메모리에 값을 넣는것을 의미한다.

리액트에서 함수형 컴포넌트는 (컴포넌트는 렌더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화) 같은 순서를 거치게 되는데,

import { useState } from "react";

export default function memoization(): JSX.Element {
  const [countState, setCountState] = useState(0);
  console.log("컴포넌트가 렌더링 되어있습니다.");

  const randomNum = Math.random();
  console.log(randomNum);

  const onClickCountState = () => {
    setCountState((prev) => prev + 1);
  };

  return (
    <>
      <div>카운트 (state) : {countState} </div>
      <button onClick={onClickCountState}>카운트 (state) +1 올리기</button>
    </>
  );
}

다음과 같은 코드는 버튼을 누를때 마다 리렌더링 되어 randomNum의 값이 고정되지 않고 계속 변경 되게 된다.

즉 리렌더링 될때 마다 값이 계속 초기화 되어 Math.random() 가 다시 실행된다.

이를 방지하기 위해 useMemo를 사용한다.

const randomNum = Math.random();

const randomNum = useMemo(() => Math.random(), []);

를 다음과 같이 변경하면 페이지가 리렌더링 되더라도 값이 변하지 않고 고정되게 된다.

useMemo 다른 예시

const mySum = () => {
  let result = 0;
  for (let i = 0; i < 9000; i++) {
    result += i;
  }
  return result;
};
console.log(mySum());

// useMemo 를 사용한경우
const mySum = useMemo(() => {
  let result = 0;
  for (let i = 0; i < 9000; i++) {
    result += i;
  }
  return result;
}, []);
console.log(mySum);

useMemo를 사용한경우 1~9000 까지 더한 값이 메모리 값에 저장되어 페이지를 리렌더링 하더라도 재실행되지 않게 되고 저장되게 된다.