[코딩애플] 쇼핑몰 프로젝트 Part9 - 성능개선 1: 개발자도구, lazy import

- props를 보냈는데 출력이 안된다거나, 이미지를 넣었느데 안보이는 버그같은 게 생긴다면
- 개발자 도구를 켜서 Elements 탭 살펴보면 되는데 여기선 내가 짠 코드를 실제 html css로 변환되어서 보여진다.
- 그게 싫고 컴포넌트로 미리 보고 싶으면 리액트 개발자도구를 설치해서 켜보면 된다.

✏️ 크롬 확장프로그램: React Developer Tools

https://chrome.google.com/webstore/

Chrome 웹 스토어

- 크롬 웹스토어 들어가면 확장프로그램 설치가 가능하다.
- 여기서 React developer Tools 설치하면 Compoents 탭이 생기는데, 내가 개발중인 리액트사이트를 컴포넌트로 미리볼 수 있다.

- 왼쪽에서 컴포넌트 구조 파악이 가능하고
- 왼쪽 상단 아이콘 눌러서 컴포넌트 찍어보면 거기 있는 state, props 등 조회 가능하다.

✏️ Profiler 탭에서 성능평가 가능

- Profiler 탭 들어가서
→ 녹화버튼 누르고
→ 페이지 이동이나 버튼조작을 해보고
→ 녹화 끝내면
- 방금 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해준다.

✏️ Redux Developer Tools
- 이것도 크롬 웹스토어에서 설치 가능
- Redux store에 있던 state를 전부 확인가능하다.
- 그리고 dispatch 날릴 때 마다 뭐가 어떻게 바뀌었는지 로그를 작성해준다. store 복잡해지면 유용하다.

 

✏️ lazy import

- 리액트 코드 다 짰으면 npm run build 입력해서 html css js 파일로 변환해야 한다.
- 하지만 리액트로 만드는 Single Page Application의 특징은 html, js 파일이 하나만 생성된다.
- 그 안에 지금까지 만든 App/Detail/Cart 모든 내용이 들어있어서 파일 사이즈가 크다.
- 그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느리다.

- 그게 싫다면 js 파일 잘게 쪼개면 된다.
- 쪼개는 방법은 import 문법을 약간 고치면 된다. 

- 지금 메인페이지 보면 Detail, Cart를 import 해서 쓰고 있는데 이런 컴포넌트들은 아래와 같은 문법으로 import 해놓으면 좋다.

// 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 컴포넌트 로드까지 지연시간이 발생한다. 
// Suspense로 Detail 컴포넌트 감싸기(귀찮으면 <Suspense> 이걸로 <Routes> 전부 감싸도 된다.
// -> Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능해짐.
<Suspense fallback={ <div>로딩중임</div> }> 
  <Detail shoes={shoes} />
</Suspense>

- lazy 문법으로도 똑같은 import가 가능한데 이 경우엔 "Detail 컴포넌트가 필요해지면 import 해주세요" 라는 뜻이 된다.
- 그리고 이렇게 해놓으면 Detail 컴포넌트 내용을 다른 js파일로 쪼개 준다. 
- 그래서 첫 페이지 로딩속도를 향상시킬 수 있다. 필요할 것 같은면 사용 ㄱ ㄱ 

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.