성능개선 1 : 개발자도구 & lazy import

기능개발이 얼추 됐으면, 이제 성능개선이 필요.

1. React Developer Tools

F12눌러서 elements탭에서 html css js파일 확인하거나, source탭에서 디버거 걸고 작동을 확인하는 등으로 버그를 체크할 수 있다.
여기에, 리액트 개발용 크롬 확장프로그램 React Developer Tools 을 더해준다면 컴포넌트형태로 코드를 확인이 가능함.

좋은점

컴포넌트 구조 파악이 쉬움.
state, props등을 바로바로 확인가능.
Profiler 탭에서 성능평가 가능

Profiler 탭

녹화버튼 누르고, 성능저하가 의심되는 페이지 이동이나 버튼조작을 해본뒤 녹화를 끝내면
방금 조작한 부분의 컴포넌트의 렌더링시간을 측정해줌.
어디 부분이 느린지 그래프형태로 확인 가능.
보통은 서버에서 데이터 가져올때 느려지는거라서 네트워크탭에서 확인을 많이하는데,
데이터도 빠르게 가져오는데 이상하게 느리다 싶으면 체크해볼만한 듯.

2. Redux Developer Tools

Redux를 사용할 때 설치하면 유용한 크롬 확장프로그램.
Redux store에 보관되어있는 state들이 무엇인지 확인가능.
dispatch를 날릴때마다 로그가 쌓여 state들의 움직임을 확인가능.
store에 저장된 state가 많아질수록 유용해질듯.

3. lazy import

리액트는 build하면 html, js파일이 하나만 생성됨. 리액트로 만드는 SPA의 특징.
그래서 로딩이 느림. 파일 큰거를 한방에 가져와야하니까.
그래서 특정 페이지를 로딩할때, 당장 쓰지않는 컴포넌트같은건 필요할때 가져와라는 식으로 import를 좀 늦출수 있음. 이러면 가져와야할 컴포넌트가 줄어드니 페이지 로딩이 좀 빨라질듯.

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

단점

늦춰놓은 컴포넌트 import가 필요한 때가 되면,
그때 어쩔수없이 느려짐.
주문관련 컴포넌트 lazy loading 걸어놨다하면,
홈화면은 로딩이 빨라지겠으나
주문하기 버튼 누르고 주문페이지 갈때 느려지는 것.

Suspense

로딩중일 때 대신 보여줄 html.
로딩중입니다... 이런거.
페이지 이동 때 뭐라도 보여주는 용도의 html이 필요할때, React에서 import해서 가져오면됨.
귀찮으면 이걸로 전부 감싸자.

<Suspense fallback={<div>로딩중입니다~</div>}>
        <Routes>
          <Route
            path="/"
            element={
              <div>
                {" "}
          .
          .
          .
          
        </Routes>
      </Suspense>