lazy component, Switch

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

suspense로 lazy component를 감싸게 되면 suspense 부분이 실행되다가 lazy component 부분의 rendering이 완료되면 suspense에서 lazy component로 넘어간다.

 

const App=()=> {
  return (
    <Suspense fallback={(<div>Loading...</div>)}>
      <NavBar />
      <div style={{ paddingTop: '75px', minHeight: 'calc(100vh - 80px)' }}>
        <Switch> 
          {/* 이 아래의 페이지들 중 하나만을 선택할 거기 때문에 switch 구문으로 감싼다. */}
          <Route exact path="/" component={Auth(LandingPage, null)} />
          <Route exact path="/login" component={Auth(LoginPage, false)} />
          <Route exact path="/register" component={Auth(RegisterPage, false)} />
          <Route exact path="/video/upload" component={Auth(UploadVideoPage, true)} />
          <Route exact path="/video/:videoId" component={Auth(DetailVideoPage, null)} />
          <Route exact path="/subscription" component={Auth(SubscriptionPage, null)} />
        </Switch>
      </div>
      <Footer />
    </Suspense>
  );
}

아래의 route들 중 하나의 route로만 들어가기 때문에 switch구문으로 이들을 한번에 감싸준다.