Memoization

불필요한 렌더링을 줄이기 위해 사용되는 기법

컴포넌트 메모 : memo

변수 메모 : useMemo ->흔히 사용되지는 않음

함수 메모 : useCallback

사용되는 상황

1. render시 변수 새로 만들어지는 상황 → useMemo
2. 함수가 새로 만들어지는 상황→ useCallback
3. 부모 리렌더시 자식도 리렌더되는 상황 : 자식의 리렌더링 막는법→컴포넌트를 메모

예시 코드

부모 컴포넌트(useMemo, useCallback 사용)

import { useCallback, useMemo, useState } from "react";
import MemoizationPresenterPage from "./presenter";

export default function MemoizationContainerPage() {
  console.log("컨테이너 렌더링됨");
  let count = 0;
  const [countState, setCountState] = useState(0);
  const aaa = useMemo(() => Math.random(), []);

  console.log(aaa); // 한 번 저장했기 때문에 숫자가 바뀌지 않음

  const onClickCount = useCallback(() => {
    count += 1;
    console.log(count);
  }, []);

  // onClick에 바로 함수 넣는 대신 useMemo 이용
  const onClickCountState = useMemo(
    () => () => {
      setCountState((prev) => prev + 1);
    },
    []
  );

  return (
    <div>
      <div>카운트:{count}</div>
      <button onClick={onClickCount}>카운트 +1</button>

      <div>카운트:{countState}</div>
      <button onClick={onClickCountState}>카운트 +1</button>
      <MemoizationPresenterPage />
    </div>
  );
}

자식 컴포넌트(컴포넌트를 기억하기)

import { memo } from "react";
function MemoizationPresenterPage() {
  console.log("프리젠터 렌더링됨");
  return (
    <div>
      <div>===============</div>
      <h1>이것은 프리젠터입니다</h1>
      <div>===============</div>
    </div>
  );
}
export default memo(MemoizationPresenterPage);