React.memo

[React] 불필요한 렌더링 최적화하기

useMemo를 사용해 렌더링에 따라 불필요한 함수가 재호출 되지 않도록 했고, useCallback을 사용해 렌더링에 따라 불빌요하게 함수가 재정의되지 않도록 했다. 이번에는 불필요한 렌더링을 막아보자. React.memo //선언 방법1 const ListContainer = React.memo(({ element, active, onRemove, onEdited }) => { ... } //선언 방법2 export default React.memo(ListContainer); 컴포넌트를 React.memo()로 감싸는 것만으로도 불필요한 렌더링을 막을 수 있다. 부모 컴포넌트에서 setState가 발생하면 자식 컴포넌트들이 모두 렌더링 되는데, 이때 props가 변경되지 않았다면 렌더링 하지 않는다..