[React] 지연 로딩(Lazy Loading)

import React, {Suspense} from "react";
import { Route, Switch, Redirect } from 'react-router-dom';

import Layout from './components/layout/Layout';
import LoadingSpinner from "./components/UI/LoadingSpinner";

//사전에 실행되지 않고 필요할 경우에만 미리 코드를 다운받음.
//다운로드가 완료될 때 까지 해당 component를 load할 수 없기 때문에
//Suspense같이 써야함.


const NewQuote = React.lazy(() => import('./pages/NewQuote'));
const QuoteDetail = React.lazy(() => import('./pages/QuoteDetail'))
const NotFound = React.lazy(() => import('./pages/NotFound'));
const AllQuotes = React.lazy(() => import('./pages/AllQuotes'));

function App() {
  return (
    <Layout>
      <Suspense
        fallback={
          <div className='centered'>
            <LoadingSpinner />
          </div>
        }
      >
        <Switch>
          <Route path='/' exact>
            <Redirect to='/quotes' />
          </Route>
          <Route path='/quotes' exact>
            <AllQuotes />
          </Route>
          <Route path='/quotes/:quoteId'>
            <QuoteDetail />
          </Route>
          <Route path='/new-quote'>
            <NewQuote />
          </Route>
          <Route path='*'>
            <NotFound />
          </Route>
        </Switch>
      </Suspense>
    </Layout>
  );
}


export default App;

성능향상을 이야기할 때 React.memo에 대해서 많이 이야기하는데 

React.memo는 광범위하고 불필요한 components를 다시 렌더링 함.

React.lazy는 지연로딩의 개념으로써 코드의 특정 thunk를 로드한다.

리액트에서는 SPA이므로 전체를 다운로드 한다 . 

그런 부분을 React.lazy를 사용해서 구현하면 

특정경로에 대한 코드가 해당 경로를 방문할 때에만 다운로드 하게 된다.

React.lazy는 특히 페이지가 많은 대규모 응용 프로그램의 경우 사용하면 웹사이트를 훨씬 빠르고

모든 코드를 한번에 로드 하지 않고 필요한 코드만 다운로드 할 수 있게 된다.