React-router - Code Splitting _route code splitting asyncComponent

ReactJS - Code Splitting  _route code splitting  asyncComponent 

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

asyncComponent 항수는 파라미터로 컴포넌트를 불러오는 함수를 받아와서 성태관리를 자동으로 해준다.

~cra-router/src/lib$ asyncRoute.js

import React from 'react';

export default function asyncComponent (getComponent) {

    return class AsyncComponent extends React.Component {

        state = { Component: AsyncComponent.Component };

        componentWillMount() {

            if (!this.state.Component) {

                getComponent().then(({default: Component}) => {

                    this.setState({ Component })

                })

            }

        }

        render() {

            const { Component } = this.state

            if (Component) {

                return <Component {...this.props} />

            }

            return null

        }

    }

}

~cra-router/src/routes$ index.async.js

import asyncRoute from '../lib/asyncRoute';

export const Home = asyncRoute(() => import('./Home'));

export const About = asyncRoute(() => import('./About'));

export const Login = asyncRoute(() => import('./Login'));

export const MyPage = asyncRoute(() => import('./MyPage'));

export const Posts = asyncRoute(() => import('./Posts'));

export const Search = asyncRoute(() => import('./Search'));

export const NotFound = asyncRoute(() => import('./NotFound'));

~cra-router/src$ App.js

import React, { Component } from 'react';

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

import { Home, About, Posts, Login, MyPage, Search, NotFound } from './routes/index.async.js'

/....../

함수내에서 컴푸넌트를 정의하고 , componentWillmount에서 불러온 컴포넌트를 static값으로 설정함으로서 , 한번 불러온 컴포넌트가 언마운트되어도 , static값으로 설정한 값은 유지되기 때문에 나중에 컴포넌트가  마운트될 때 초기 state가 설정되면서 기존에 불러왔었던,컴포넌트를 사용하기 때문에 파일을 새로 불러오지 않아도 계속 사용할 수 있다.

아래 그림에서 보면 값이 계속 static으로 누적되어 있음을 알 수있다.

Name 부분의 앞에 숫지가 적혀 있는것들이 순서대로 홈, 소개, 포스트, 로그인, 마이페이지, 검색 이다.