👍 성능개선

✔️ React Developer Tools

크롬 확장 프로그램으로 개발중인 리액트사이트를 컴포넌트로 미리볼 수 있습니다.

구조파악

왼쪽에서 컴포넌트구조 파악이 가능하고, 왼쪽상단 아이콘눌러서 컴포넌트 찍어보면 state, props 조회 가능합니다. 수정해볼 수 도 있습니다.

Profiler 탭에서 성능평가

Profiler 탭 들어가서

• 녹화버튼 누르고
• 페이지 이동이나 버튼조작을 해보고
• 녹화를 종료하기

방금 렌더링된 모든 컴포넌트의 렌더링시간을 측정해줍니다.

이상하게 느린 컴포넌트가 있다면 여기서 범인을 찾을 수 있습니다.
<div>를 1만개 만들거나 그러지 않는 이상 보통은 걱정할 필요는 없습니다.

지연 원인 대부분은 서버에서 ajax 요청결과가 늦게 도착해서 그런 경우가 많습니다.

✔️ Redux Developer Tools

이것도 크롬 웹스토어에서 설치가능합니다.

장점

1. Redux store에 있던 state를 전부 확인가능합니다.
2. dispatch 날릴 때 마다 뭐가 어떻게 바뀌었는지 로그를 작성해줍니다.
3. store 복잡해지면 유용합니다.

리액트 사이트의 첫 페이지 로딩 속도 증가시키기

"해당 컴포넌트가 필요해지면 import 해주세요" 라는 뜻이 됩니다.
그리고 이렇게 해놓으면 해당 컴포넌트 내용을 다른 js 파일로 쪼개줍니다.
그래서 첫 페이지 로딩속도를 향상시킬 수 있습니다.

(App.js)
import {lazy, Suspense, useEffect, useState} from 'react'

const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )

컴포넌트 로드까지 지연되는 시간동안 다른 컴포넌트 출력

lazy 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 수 있습니다. 그럴 땐

1. Suspense import 하기
2. Detail 컴포넌트 감싸기
   Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능합니다.

<Suspense fallback={ <div>로딩중입니다</div> }>
  <Detail shoes={shoes} />
</Suspense>