Memoization 이란?

Memoization은 특정 값을 기억해놓고 화면이 rerender되어도 기존에 저장된 값이 날아가지 않고 계속 사용할 수 있는 기능을 말한다.

memo

• 컴포넌트를 감싸주어 memoization한다. 감싸진 컴포넌트의 결과를 저장하고 결과가 바뀌지 않는다면 rerender하지 않음

예제

import { memo } from "react";
function MemoizationChildPage() {
  console.log("child page rendered");
  return (
    <div>
      <div>=========================</div>
      <div>ChildPage</div>
      <div>=========================</div>
    </div>
  );
}
export default memo(MemoizationChildPage);

useMemo

• useMemo는 연산된 결과를 가진 변수값을 저장한다.

const memo = useMemo(() => {
    Math.random();
  }, []); // 대괄호 안에 값을 넣으면(컴포넌트, state 등) 해당 값이 변할 때 재실행
  console.log(memo);

const onClickCountState = useMemo(() => {
    return () => {
      console.log(countState + 1);
      setCountState(countState + 1);
    };
  }, []);

/주의사항/
위 코드 처럼 state를 넣으면 그 state의 값이 저장되므로 사용하면 안됨.

useCallback

• useCallback은 함수를 memoization한다. rerender되었을 때 함수는 다시 그리지 않아 효율적이다.

const onClickCountState = useCallback(() => {
    setCountState((prev) => prev + 1);
  }, []);