React, 성능개선 lazy import , Suspense

💡 lazy import 란?

리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데 그게 싫다면 js 파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 고치면 되는데 지금 페이지에서 사용하지 않고 있는 컴포넌트들은 lazy import 해놓으면 좋다.

리액트 코드 다 짰으면 npm run build 입력해서
여러분이 짰던 이상한 코드들을 역사와 전통의 html css js 파일로 변환해야합니다.
근데 리액트로 만드는 Single Page Application의 특징은 html, js 파일이 하나만 생성됩니다.

그 안에 지금까지 만든 App / Detail / Cart 모든 내용이 들어있어서 파일사이즈가 크기 때문에 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다.

그게 싫다면 js 파일을 잘게 쪼개면 된다.

- lazy import 예시,

쪼개는 방법은 import 문법을 약간 고치면 되는데 메인페이지 보면 Detail, Cart를 import 해서 쓰고있는데 사실 생각해보면 Detail, Cart 컴포넌트는 메인페이지에서 전혀 보이지 않고 있기 때문에 이런 컴포넌트들은 이런 문법으로 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 해주세요" 라는 뜻이 된다. 그리고 이렇게 해놓으면 Detail 컴포넌트 내용을 다른 js 파일로 쪼개줍니다.
그래서 첫 페이지 로딩속도를 향상시킬 수 있있으나 단점으로는 lazy import를 적용한 컴포넌트가 담긴 페이지 진입 시 컴포넌트 로딩시간이 발생한다는 것이다!

💡 Suspense

lazy 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 때 어떠한 대처가 필요하고 바로 이럴때 Suspense를 사용하면 된다.

- Suspense 사용 방법

Suspense를 import 하고 Suspense를 적용하고자 하는 컴포넌트를 감싸면
감싸진 컴포넌트가 로딩중일 때 대체 화면을 보여줄 수 있다.

<Suspense fallback={ <div>로딩중...</div> }>
  <Routes>
  </Routes>
</Suspense>