[컴][웹] reactjs 에서 dynamic 하게 component 를 load 하는 법

코드 분할 / dynamic loading / react component loading

code splitting 방법들

자세한 내용은 React 문서 "Code-Splitting – React" 를 참고하자.
여기 내용은 client-side rendering 을 위한 것이다.

import()

기본적으로 webpack 을 사용하면, import 를 할 때 dynamic import() 를 사용할 수 있다.

import {add} from './math';
console.log(add(10,10 ));

위의 statment 를 아래처럼 수정해서 사용할 수 있다.

import("./math").then(math => {
    console.log(math.add(10, 10))
});

React.lazy

v16.6 부터 지원한다 : React v16.6.0: lazy, memo and contextType – React Blog

현재 default export 에 대한 지원만 한다. 그래서 만약 named export 를 사용해야 하는 상황이면, 새로운 component 를 하나 만들고, 그 안에서 다시 default export 를 해서 default export 로 만들어서 사용하면 된다.(참고)

이 방법을 사용하면, webpack 에서 chunk 를 나눠준다.

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

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

Route-based code splitting

route 를 기준으로 code splitting 을 할 때는 아래처럼 사용하면 된다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

See Also

1. Code Splitting | webpack
2. Lazy Loading | webpack

References

1. Code-Splitting – React