🎈 들어가며

<리액트를 다루는 기술> 11장 컴포넌트 성능 최적화를 공부하면서 정리한 내용입니다.📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다.

🎈 많은 데이터 렌더링하기

App.js

function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할일 ${i}`,
      checked: false,
    });
  }
  return array;
}

• 최적화 테스트를 위해 반복문을 이용해서 할 일을 2500개까지 늘립니다.

🎈 React DevTools를 통한 성능 모니터링

• React DevTools를 크롬 확장 프로그램 스토어에서 다운 받으세요

• F12을 누르면 탭란 끝 부분에 Profiler라는 탭이 있습니다.

  

• 파란색 녹화 버튼을 누르고 ‘할 일 1’ 항목을 체크한 다음 체크 표시가 되면 녹화 버튼을 눌러서 성능을 체크합니다.

🎈 느려지는 원인 분석

• 성능을 체크하면 Render duration가 장난 아니게 길게 나오는 걸 볼 수 있습니다. (제 컴은 900ms 정도 나왔네요)
• 느린 이유는 할 일1 항목과 상관없는 컴포넌트들까지 리렌더링 됐기 때문입니다.

🍧 컴포넌트가 리렌더링 되는 경우

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

🎈 React.memo를 사용하여 컴포넌트 성능 최적화

🍧 react.memo(함수)