8. [리액트- 라우터 배포준비- 최적화] LazyLoading 과 React.memo()

1. React.memo()

https://dive-into-frontend.tistory.com/79

7. 리액트의 최적화 With React.memo(), useCallback(), useMemo()

 

2. LazyLoading  

레이지 로딩이란, 필요할 때, 로딩을 하는 것을 말한다.

기본적인 SPA 의 배포 에서, 클라이언트는, 배포된 사이트를 들어갈때,

모든 자바스크립트를 포함한 코드를 전부 다운받고, 페이지를 로드한다.

 

이는, 잘 들어가지 않는 페이지에 대해서는, 불필요한 일이고, 데이터의 낭비를 초래한다.

 

그러므로, 잘들어가지 않는 페이지에 한해, LazyLoading 을 적용시켜, 필요한 경우에만 다운로드 하도록 만든다.

 

React 는 그것을 쉽게 구현하도록 만들어 주었다.

 

바로 React.lazy() 를 통해

 

 <레이지 로딩 전>
 
    import { Route, Redirect, Switch } from "react-router-dom";
    import MainHeader from "./components/headers/main-header";
    import Welcome from "./pages/welcome";
    import ProductDetail from "./pages/product-detail";
    
<레이지 로딩 설정 >

    import React from "react"                   // React 임포트
    import { Route, Redirect, Switch } from "react-router-dom";
       	 ...               
    const Products = React.lazy(()=> import("./pages/product")) // 프로덕트 레이지로딩
    
** import 를 하면, 즉시 다운로드가 된다.
	그러므로, 변수 형태에 저장해, React.lazy() 를 통해, 콜백함수로 import 한다.

 

3. 지연 로딩  

클릭하는 즉시 다운로드 받고 접속한다.

 

말이 이상하다. 클릭을 한 후에, 다운로드를 받고, 다운로드가 끝나면 들어간다?

다운로드 중에는 어떻게 되는거지?

 

바로 에러가 짠!

 

0.1초의 그 순간에도 페이지는 접속을 하려 하지만,

그 찰나의 순간에 다운로드를 받고 있는 우리는 그 페이지에 접속 할 수 없다.

 

그러므로, 다운로드 받는 중에, 지연로딩 을 만들어야한다.

 

지연로딩이란, 다운로드(로딩)중에, 본 코드를 잠시 멈추고, 다른 코드를 실행시켜주는 것이다.

다운로드가 끝나면, 다시 본 코드를 읽게 될 것이다.

 

react 에서는 Suspense 를 통해, 지연 로딩을 추가한다.

 

    import React, {Suspense} from "react"                   // React, Suspense 임포트
    import { Route, Redirect, Switch } from "react-router-dom";
            ...               
    const Products = React.lazy(()=> import("./pages/product")) // 프로덕트 레이지로딩

        <Suspense fallback = {<p> ...loading </p>}>      // Suspense 로 Router 들을 감싸준다.
            <Switch>
                <Route exact path="/">   
                    <Redirect to="/welcome" />
                </Route>
                <Route path="/welcome">
                    <Welcome />
                </Route>
                <Route exact path={"/products"}>
                    <Products />
                </Route>
                <Route path={"/products/:productsName"}>
                    <ProductDetail />
                </Route>
            </Switch>
        </Suspense>     // Suspense 로 감싸준다.

 

Suspense 의 fallback 에서는, JSX 코드를 반환해, 로딩 될 시간동안 다른 컴포넌트를 렌더할 수 있다.

 

<Suspense fallback = {<div> <LoadingSpinner/ > </div>}> 
    <Switch>
        <Router path="/">
            <Welcome />
        </Router>
            ...