Memoization

Memoization

(연산, 함수의)특정 값을 기억해놓고 화면이 rerender되어도 기존에 저장된 값이 날아가지 않고 계속 사용할 수 있는 기능이다.

1.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);

2.useMemo

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

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

주의사항 : 아래처럼 state를 넣으면 그 state 값이 저장되므로 사용하지 말자

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

3.useCallback

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

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