리액트에서 Lazy Loading 활용하기

Lazy Loading이란?

특정 코드가 필요할 때만 그 코드를 로드하는 것.

SPA로 개발을 하면 모든 코드 번들이 로드되기 때문에 비효율적일 수 있다.

 

코드를 여러 번들로 나누고, 각각 필요할 때만 다운로드 하는 것.

라우트별로 나누어 그 라우트로 들어갈 때 다운로드한다.

 

<기존 코드 (Lazy Loading 적용 전>

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
 
import AllQuotes from './pages/AllQuotes';
import QuoteDetail from './pages/QuoteDetail';
import NewQuote from './pages/NewQuote';
 
function App() {
    return (
        <Switch>
            <Route path='/' exact>
            	<Redirect to='/quotes' />
            </Route>
            <Route path='/quotes' exact>
            	<AllQuotes/>
            </Route>
            <Route path='/quotes/:quoteId'>
            	<QuoteDetail/>
            </Route>
            <Route path='/new-quote' exact>
            	<NewQuote/>
            </Route>
        </Switch>
    );
}

 

<Lazy Loading 적용 후 - NewQuotes, QuoteDetail >

import React, { Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
 
import AllQuotes from './pages/AllQuotes';
//import QuoteDetail from './pages/QuoteDetail';
//import NewQuote from './pages/NewQuote';
 
const NewQuote = React.lazy(() => import('./pages/NewQuote'));
const QuoteDetail = React.lazy(() => import('./pages/QuoteDetail'));
 
function App() {
	return (
    	<Suspense fallback={<p> Loading... </p>}> //페이지가 로딩되는 사이제 보여질 화면
            <Switch>
                <Route path='/' exact>
                    <Redirect to='/quotes' />
                </Route>
                <Route path='/quotes' exact>
                    <AllQuotes/>
                </Route>
                <Route path='/quotes/:quoteId'>
                    <QuoteDetail/>
                </Route>
                <Route path='/new-quote' exact>
                    <NewQuote/>
                </Route>
            </Switch>
        </Suspense>
    );
}

 

 

복잡한 프로젝트의 초기 로딩을 줄여주고, 효율적인 동작을 위해 필수적!