컴포넌트 리렌더링 방지하기! React.memo

벨로퍼트와 함께하는 모던 리액트: React.memo

 

컴포넌트의 리랜더링을 방지!

 

export default할 때 React.memo()로 컴포넌트를 감싸주면 된다. 하지만 최적화의 경우 개선이 되는 경우에만 사용해야지 그렇지 않으면 불필요한 props 비교를 하게 된다고 한다.

import React from 'react';

const CreateUser = () => {
  return (
    <div>
      ...
    </div>
  );
};

export default React.memo(CreateUser);

함수형 업데이트?

setState( user+1 ) 를 setState(user=>user+1)로 작성하는 것. 이렇게 하면 set 함수에서 최신의 user를반영하게 된다고 한다. 그래서 deps (예: useCallback( ()=>{}, [user] ) 여기서 [user]가 deps를 의미함 )에 user를 넣지 않아도 반영된다고 한다.