리액트에서 빌드를 하게되면 html, js 파일이 1개만 생성된다.
그 안에 지금까지 만든 컴포넌트 내용들이 들어있어 파일 사이즈가 크다.
그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데,
이 현상을 해결하려면 JS파일을 잘게 쪼개면 된다.
쪼개는 방법은 import 문법을 약간 수정하면 된다
// 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') )lazy 문법으로도 똑같이 import가 가능한데,
위 경우엔 “Detail 컴포넌트가 필요해지면 import 해주세요” 라는 뜻이 된다.
이렇게 import 하게 되면 빌드 시 Detail 컴포넌트를 다른 파일로 쪼개준다.
Suspense
lazy 문법을 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 수 있게 된다. 그럴 땐
- Suspense 를 import 한다.
- Detail 컴포넌트를 감싸준다.
Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성을 할 수 있다.
귀찮으면 <Suspense> 이걸로 <Routes> 전부 감싸도 됩니다.
// App.js
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Index prd={prd} setPrd={setPrd} req={req} setReq={setReq} />} />
<Route path="/detail/:prdId" element={<Detail prd={prd} />}/>
<Route path="/about" element={<About />}>
<Route path="shopping" element={<AboutShopping />} />
<Route path="delivering" element={<AboutDelivering />} />
</Route>
<Route path="/cart" element={<Cart />} />
<Route path="*" element={<div style={{padding:"2rem"}}>There's nothing here!</div>} />
</Routes>
</Suspense>