React : lazy로 로딩속도 향상시키기 (lazy, Suspense)

lazy

리액트로 만드는 Single Page Application는 html,js가 한 파일만 생성되기 때문에 무거워져 속도가 느리게 된다. 그럴 땐 파일을 쪼개면 되는데, lazy를 쓰면 된다.

전

import Detail from './Routes/Detail.js'
import Cart from './Routes/Cart.js'

위 코드에서 Detail과 Cart js는 첫 페이지에서 불러올 필요가 없기 때문에 아래같은 문법으로 import하면 된다.

후

import { createContext, lazy, Suspense, useEffect, useState} from 'react'; // 여기서 lazy, Suspense

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

---

Suspense

lazy로 불러오면 Detail 컴포넌트가 로딩이 지연될 수 있다.

<Suspense fallback={ <div>로딩중임</div> }>
  <Detail shoes={shoes} />
</Suspense>

1. Suspense를 import 해오고
2. Detail 컴포넌트를 감싼다.

그러면 Detail 컴포넌트가 로딩중일 때 대신 보여줄 html을 작성할 수 있다.
(귀찮으면 <Suspense>로 <Routes>를 전부 감싸도 된다. 그러면 그 안의 모든 Route들에 로딩중 페이지가 생김.)

---

출처 : 코딩애플 https://codingapple.com/