memoization

memoization

불필요한 렌더링

컨테이너의 state 값이 바뀔 때 컨테이너 뿐만 아니라 프레젠터도 같이 렌더링이 되는 걸 확인할 수 있다. 서비스가 커질수록 불필요한 렌더링을 막을 수 있어야한다.

memo

컴포넌트의 리렌더링을 막고 싶은 경우 memo 를 사용한다

import { memo } from "react";

function MemoizationPresenterPage() {
  console.log("프리젠터가 렌더링 됩니다");

  return (
    <div>
      <div>=========================================</div>
      <h1>이것은 프리젠터 입니다</h1>
      <div>=========================================</div>
    </div>
  );
}

export default memo(MemoizationPresenterPage);

memo가 적용된 상태에서 변경된 props 를 넘기면 값이 변할 때마다 렌더링 되게 만들 수 있다. 리렌더가 필요한 state 들만 props로 넘겨줄 수 있어야한다. props.countState 라고 따로 명시할 필요 없음!

useMemo

useMemo 를 사용해서 렌더링이 되더라도 값을 고정할 수 있다. useMemo를 사용한 상태에서 상태값 변경에 따라 렌더링이 필요한 경우 의존성 배열을 이용해서 값이 변경되는 기준을 줄 수 있다.

 const a = useMemo(() => Math.random(), []);
 console.log(a);

웹페이지에서 관리자 페이지의 경우 수많은 데이터를 보게 된다. 관리자가 목록을 체크하거나 할 때, 상태가 변화할 때마다 렌더링이 일어나게 되면 속도가 저하 되기 때문에 memoization 을 사용해서 렌더링을 막을 수 있도록 해야한다.

useCallback

함수를 memo 할 수 있다. 의존성 배열이 없거나 1, 2 개일 때 사용해주면 좋다.

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

🚨 주의!!
의존성 배열에 상태값이 들어가게 되면 callback 이 다시 만들어진다. 하지만 상태값이 많이 들어가게 되면 예상치 못한 에러들이 나오기 때문에 이런 경우에는 새로 만들어 주는 것이 낫다.

useMemo 로 함수 저장하기

useMemo 로 직접 useCallback 을 만들 수 있다. 하지만 useCallback 을 쓸 때보다 복잡하기 때문에 useCallback 을 써주는 편이 더 깔끔하다.

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