성능 최적화

성능최적화

DevTools Profiler로 컴포넌트 프로파일링

개발 모드에서 프로파일링 기능을 통해서 성능개선을 시킬 수 있습니다.

유튜브 영상 설명 또한 존재합니다.

긴 목록 가상화하기

리스트로 나타나는 긴 목록들을 한번에 구딩 보여줄 필요가 없습니다. windowing 기법을 통해서 렌더링하는데 걸리는 시간과 생성되는 DOM의 수를 줄이는 것이 중요합니다.

react-window와 react-virtualized가 가장 널리 알려진 windowing 라이브러리입니다.

재조정 피하기

몇몇 특정 상황에서 컴포넌트를 업데이트할 필요가 없다는 것을 알고 있다면 shouldComponentUpdate()에서 false로 반환해서 렌더링 프로세스를 건너뛰게 할 수 있습니다. 대부분의 경우에 shouldComponentUpdate를 직접 작성하는 대신에 React.PureComponent에서 상속받아서 사용합니다.

React 16.8

React 16.8 버전 이후에서부터는 React.PureComponent의 기능을 React.memo가 대신하고 있습니다.