[리액트를 다루는 기술] 11장 컴포넌트 성능 최적화 - React Developer Tools / React.memo / react-virtualized

리액트 전용 개발자 도구로 성능 분석이 가능하다.

크롬 확장 프로그램
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

F12로 열어보면 Components 탭 / Profiler 탭이 생긴다.

profiler탭에서
1. 왼쪽에 녹화 버튼을 누르고 버튼 동작 후 녹화 중지
2. Ranked를 통해 리렌더링된 컴포넌트를 오래 걸린 순서대로 확인할 수 있다.

컴포넌트 리렌더링 발생 시점

1. 자신이 전달받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. forceUpdate 함수가 실행될 때

👉 컴포넌트 리렌더링 성능을 최적화해 주어야 한다.

개선 방법

React.memo

클래스 컴포넌트에서는 shouldComponentUpdate를 사용하지만,
함수 컴포넌트에서는 React.memo를 사용해야 한다.

: 컴포넌트의 props가 바뀌지 않았다면 리렌더링하지 않도록 설정한다.

export TodoListItem

단순히 컴포넌트를 감싸준다.

export default React.memo(TodoListItem)

useState의 함수형 업데이트 or useReducer 이용

• state 상태가 단일 boolean/number/string일 경우 useState를 사용하고,
  상태가 객체/배열인 경우 useReducer를 사용하는 것이 적합하다.
• state가 previous state 이전 상태에 크게 의존하거나 state가 매우 복잡한 경우 useReducer를 사용하는 것이 좋다.

const [state, dispatch] = useReducer(reducer, initialState);

react-virtualized

리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있다. (자원 절약)

yarn add react-virtualized

정리

• 기본적으로 리액트 컴포넌트 렌더링은 빠르기 때문에, 컴포넌트를 개발할 때 최적화 작업에 대해 너무 스트레스받거나 일일이 react.memo를 작성할 필요는 없다.
• 단, 100개를 넘지 않거나 업데이트가 자주 발생하는 리스트 관련 컴포넌트를 작성할 때는
  1)리스트, 2)아이템 리스트를 최적화 해줘야 한다.