useMemo와 React.memo의 차이

 

의문점이 생긴 시점

---

 

프로젝트를 하던 중

불필요한 리렌더링이나 불필요한 계산을 방지하기 위해

React.memo를 활용하였다. 

그러나 useMemo도 존재하였는데, 

이 두개의 차이점이 궁금해졌다. 

 

 

아래는 React.memo를 활용한 코드

const Loading = React.memo((props) => {
  const ButtonRef = useRef();
  const dispatch = useDispatch();

  useEffect(() => {
    ButtonRef.current.focus();
  }, []);

  const onBtnClickHandler = () => {
    dispatch(loadingActions.close());
  };
  return (
    <>
      <div className={styles.backdrop}>
        <div className="error-modal__actions">
          <p>{props.children}</p>
          <LoadingIndicator />
          <ButtonCommon
            onClickHandler={onBtnClickHandler}
            variant="outline-light"
            text="Close"
            ref={ButtonRef}
          />
          <h1 className={styles.loadingLayer}>{props.message}</h1>
        </div>
      </div>
    </>
  );
});

export default Loading;

 

 

리렌더링 되는 조건

---

state의 변경이 있을 때 

새로운 props가 들어올 때 

부모 컴포넌트가 렌더링 될 때 

 

 

https://www.linkedin.com/pulse/reactmemo-vs-usememo-kristiyan-velkov/

 

React.memo

 

---

memo는 props가 변경되지 않았을 때 리렌더링을 건너뛴다

부모 컴포넌트가 리렌더링 될 때 props가 변경되지 않는 한 

자식 컴포넌트는 리렌더링 되지 않는다.

 

 

react.memo 커스텀하기

 

/*별도로 두번째 인자를 넘기지 않을 경우 props가 변하지 않는다면 재렌더링 되지 않음*/
const NameTag = React.memo(
  (props) => <div>{props.name}</div>
);

/*만약 두번째 인자로 특정 props.name값이 같지 않을때만 재렌더링 하도록 커스텀 비교 함수를 넣어주고 싶을 때*/
const NameTag = React.memo(
  (props) => <div>{props.name}</div>
,
  (prevProps, nextProps) => prevProps.name === nextProps.name
)

 

 

useMemo

---

리렌더링 할 때 계산의 결과를 캐시해주는 리액트 훅

deps에 주어진 값이 변경되지 않았을 때 

useMemo는 이미 계산된 값을 리턴해준다.

 

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

 

 

 

차이점

 

---

1. React.memo는 HOC, useMemo는 hook이다.

2. React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능하다.

 

 

https://sustainable-dev.tistory.com/137