[javascript/react] React.lazy / Suspense에 대하여 이해하기

[javascript/react] React.lazy / Suspense에 대하여 이해하기

 

lazy는 지연로딩이란 의미로, 데이터를 모두 한번에 로드시키는 것이 아니라, 현재 보이는 화면만 로드 시켜주면서

성능을 향상 시키는 것을 의미한다.

import './App.css';
import { BrowserRouter, Route,Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const loading = () => <p>Loading</p>;

const History =  lazy(() => import('./views/History'));
const Test =  lazy(() => import('./views/Test'));

function App() {
  return (
    <BrowserRouter>
    <Suspense fallback={loading()}>
      <Switch>
      <Route exact path="/history" name="history" component={History} />
      <Route exact path="/test" name="test" component={Test} />
      </Switch>
    </Suspense>
    </BrowserRouter>
  );
}

export default App;

 

#lazy #suspense #react