🌠 성능 모니터링: 크롬 개발자 도구

• Performance 탭

  • 정확히 몇 초 걸리는지 측정 & 확인 가능

• 방법

  1. 녹화

     1. Performance 탭의 녹화 버튼 클릭 ( ● )

     2. 체크하고 싶은 성능 활동하기

     3. 화면에 변화 반영 시

        Stop 버튼 누르기

  2. 성능 분석 결과

     1. Timings (결과에 나옴)

        각 시간대 → 컴포넌트의 어떤 작업 처리 됬는지 확인 가능

        • 걸린 시간: 커서 올려서 확인 가능

        • 참고

          처리 시간: 컴퓨터 환경에 따라 결과가 다르게 나타날 수 있음

🌠 리렌더링 발생 경우

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

🌠 성능 저하 이유

불필요한 리렌더링이 많아서

→ 방지 필요 (성능 최적화)

🌠 [ 참고 ] 개발 환경에서의 성능

• 빠른 정도

  실제 프로덕션(에서의 구동) > 개발 서버(를 통해 보이는 리액트 애플리케이션)

  • 프로젝트 규모 ↑ → 차이 ↑

• 실제 프로덕션 모드가 더 빠른 이유

  에러 시스템 & Timing → 비활성화
  

• 프로덕션 모드 구동 방법

  $ yarn build

  $ yarn global add serve

  $ serve -s build