크롬 확장프로그램 : React Developer Tools
- 크롬 웹스토어 들어가면 확장프로그램 설치 가능
- React Developer Tools 설치하면 Components 탭이 생기는데 개발중인 리액트 사이트를 컴포넌트로 미리 볼 수 있다.
- 왼쪽에서 컴포넌트 구조 파악이 가능
- 왼쪽 상단 아이콘 눌러서 컴포넌트 찍어보면 거기 있는 state, props 이런 게 조회 가능하고 수정도 가능
Profiler 탭에서 성능평가 기능
- 녹화버튼 누르고 페이지 이동이나 버튼 조작 등을 해보고 녹화를 끝내면 방금 렌더링된 모든 컴포넌트들의 렌더링 시간을 측정해준다.
- 이상하게 느린 컴포넌트가 있다면 여기서 범인을 찾을 수 있다.
- <div>를 1만개 만들거나 그러지 않는 이상 보통 걱정할 필요는 없고 대부분 서버에서 ajax 요청 결과가 늦게 도착해서 그런 경우가 많다.
Redux Developer Tools
- 크롬 웹스토어에서 설치 가능
- Redux store에 있던 state를 전부 확인 가능
- dispatch 날릴 때 마다 뭐가 어떻게 바뀌었는지 로그를 작성해준다.
- store 복잡해질 때 유용하다.
Lazy import
- react는 spa(Single page application)의 특성 상 html, js 파일이 하나만 생성된다.
- 그 안에 지금까지 만든 모든 컴포넌트들의 내용이 들어가 있기 때문에 파일 사이즈가 좀 큰 편이다.
- 따라서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다.
(App.js)
import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'
===========================================================
(App.js)
import {lazy, Suspense, useEffect, useState} from 'react'
const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )
- 이렇게 잘게 쪼개주면 된다.
- 메인 페이지에서 Detail, Cart 컴포넌트는 보이지 않기 때문에 이런 식으로 lazy 문법으로 import 해주면 된다.
- 'Detail 컴포넌트가 필요해지면 import 해주세요' 라는 의미가 된다.
- 이렇게 해놓으면 Detail 컴포넌트 내용을 다른 js 파일로 쪼개준다.
- 따라서 첫 페이지 로딩 속도를 향상시킬 수 있다.
<Suspense fallback={ <div>로딩중임</div> }>
<Detail shoes={shoes} />
</Suspense>
- 하지만 lazy 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 수 있다.
- 이럴 때 Suspense 라는 것을 import 해오고
- Detail 컴포넌트를 감싸면 Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능하다.
- <Suspense>로 <Routes>를 전부 감싸도 무방
