[React] 성능 최적화, PureComponent, memo, shouldComponentUpdate, React dev tools

크롬 확장프로그램 React dev tools를 설치
chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US

React Developer Tools

개발자도구 - Components - 우측부분 톱니 버튼 - General - Highlight updates when components render 체크

렌더링 될 때 마다 렌더링 되는 부분을 표시해주며, 렌더링 양에 따라 색으로 렌더링이 얼마나 일어나는지 표시해줌
초록색에서 렌더링이 많아질 수록 노란색과 가까운 색으로 변함
초록색 : 렌더링 적음, 노란색 : 렌더링 많음

 

이를 통해 필요없는 렌더링이 일어나는 부분을 확인할 수 있음 ( input에 입력될 때 마다 모든 부분이 다시 렌더링됨 )

shouldComponentUpdate() - 어떤 상황일 때 렌더링할것인지 직접 설정할 때 사용

shouldComponentUpdate(nextProps, nextState, nextContext) {
  if (x > y) {  // x > y 이면 렌더링
    return true;
  } 
  return false;  // x > y 아니면 렌더링 하지 않음
}

 

PureComponent - 자동으로 필요한 부분만 렌더링 해줌, class에서 사용

import React, { PureComponent } from 'react';

class Test extends PureComponent {
  ...
}

memo - 자동으로 필요한 부분만 렌더링 해줌, hooks에서 사용

import React, { memo } from 'react';

const Test = memo(({ props1 }) => {
   ...
}

 

 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.