(React Router) v4로 마이그레이션 해보자!

// About.js
// 프롭스 중에 children도 같이 렌더링한다.
import React from 'react/lib/React';

const About = ({children}) => (
  <div>
    <h2>About</h2>
    <div>{children}</div>
  </div>
);

export default About;

// Container.js
// 상단에 메뉴(고정)들이 존재하고, 프롭스 중에 children 내용이 변경되면서 렌더링 된다.
import React from 'react/lib/React';
import Link from 'react-router/es/Link';

const Container = ({children}) => (
  <div>
    <header>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/about/name">About - Name</Link></li>
        <li><Link to="/about/redirect0">About - RedirectTo: Portfolio #0</Link></li>
        <li><Link to="/about/redirect1">About - RedirectTo: Portfolio #1</Link></li>
        <li><Link to="/portfolio">Portfolio - All</Link></li>
        <li><Link to="/portfolio/0">Portfoilo - #0</Link></li>
        <li><Link to="/portfolio/1">Portfoilo - #1</Link></li>
      </ul>
    </header>
    <div>
      {children}
    </div>
  </div>
);

export default Container;

// Home.js
import React from 'react/lib/React';

const Home = () => (<h2>Home</h2>);

export default Home;

// Name.js
import React from 'react/lib/React';

const Name = () => (<h2>Name</h2>);

export default Name;

// Portfolio.js
import React from 'react/lib/React';

const Portfolio = ({routeParams: {id}}) =>  {
  const allList = [
    { id: 0, text: 'portfolio #0' },
    { id: 1, text: 'portfolio #1' }
  ];
  const filterList = id ? allList.filter(v => v.id === +id) : allList;
  const renderList = filterList.map(v => (
      <li key={v.id}>{v.text}</li>
    )
  );
  return (
    <div>
      <h2>Portfolio</h2>
      <ul>{renderList}</ul>
    </div>
  );
};

export default Portfolio;

// App.js
import React from 'react/lib/React';

// import { Router, Route, IndexRoute, Redirect, browserHistory, hashHistory } from 'react-router';
// 리액트 라우터를 코드 스플리팅 하려면 위 코드를 이렇게 하나씩 불러와야한다 귀찮 ㅠ
import Router from 'react-router/es/Router';
import Route from 'react-router/es/Route';
import IndexRoute from 'react-router/es/IndexRoute';
import Redirect from 'react-router/es/Redirect';
import browserHistory from 'react-router/es/browserHistory';
import hashHistory from 'react-router/es/hashHistory';

// HTML5 History API 지원여부 파악
const isBrowserHistory = history.pushState;

// 리액트 라우터 3에서 코드 스플리팅 하기.
const loadRoute = callback => module => callback(null, module.default);

const App = () => (
  <Router history={isBrowserHistory ? browserHistory : hashHistory}>
    <Route path="/" getComponent={ // component 대신에 getComponent를 써야 코드 스플리팅이 됨.
      (loaction, callback) => {
        import('./components/Container').then(loadRoute(callback))
      }}>
      <IndexRoute getComponent={ // 요 아래 컴포넌트들은 전부 Container 라우트의 자식들이다.
        (loaction, callback) => {
          import('./components/Home').then(loadRoute(callback))
        }}/>
      <Route path="about" getComponent={
        (loaction, callback) => {
          import('./components/About').then(loadRoute(callback))
        }}>
        <Route path="name" getComponent={
          (loaction, callback) => {
            import('./components/Name').then(loadRoute(callback))
          }}/>
        <Route path="redirect0"
               onEnter={(nextState, replace) => replace('/portfolio/0')}
        />
        <Redirect from="redirect1" to="/portfolio/1" />
      </Route>
      <Route path="portfolio(/:id)" getComponent={
        // 파라미터 :id 때문에 위의 사진과 같이 파라미터가 id가 된 거다.
        // 괄호로 감쌌기 때문에 생략이 가능하다는 소리다.
        (loaction, callback) => {
          import('./components/Portfolio').then(loadRoute(callback))
        }}/>
    </Route>
  </Router>
);

export default App;

// index.js
if( // 배포할 때는 리액트 개발 도구를 죽여놔야함.
  process.env.NODE_ENV === 'production' &&
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
  Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
) window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {};

import React from 'react/lib/React';
import { render } from 'react-dom';

import App from './App';

render(<App />, document.getElementById('app'));

// webpack.dev.config.js
const webpack = require('webpack');
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PORT = 3001;
const ROOT = './app/src';

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    `webpack-dev-server/client?http://localhost:${PORT}`,
    // bundle the client for webpack-dev-server
    // and connect to the provided endpoint

    'webpack/hot/only-dev-server',
    // bundle the client for hot reloading
    // only- means to only hot reload for successful updates

    resolve(ROOT, 'index')
    // the entry point of our app
  ],
  output: {
    publicPath: '/',
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new HtmlWebpackPlugin({
      template: `${ROOT}/index.html`
    })
  ],
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: /node_modules/,
    }]
  },
  devServer: {
    hot: true,
    inline: true,
    port: PORT,
    historyApiFallback: true,
    contentBase: ROOT
  }
};

process.noDeprecation = true;

// webpack.config.js
'use strict';
const webpack = require('webpack');
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const ROOT = './app/src';
const DIST = 'app/dist';

module.exports = {
  entry: {
    app: ROOT + '/index.js',
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: resolve(__dirname, DIST),
    publicPath: '/'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 터미널 창에 출력되는 게 보기 귀찮아서 추가.
        unused: true // tree shaking
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      // 아래 부분이 핵심
      minChunks: function (module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new HtmlWebpackPlugin({
      template: './app/src/index.html',
      minify: {
        collapseWhitespace: true,
        conservativeCollapse: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }
    })
  ],
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: /node_modules/,
    }]
  }
};

process.noDeprecation = true;

// server.js
const express =  require('express');
const app = express();
const PORT = 3000;
const DIST = `${__dirname}/app/dist/`;

// server-open
app.use('/', express.static(DIST));
app.listen(PORT, () => {
  console.log('Express listening on port', PORT);
});

// client router
app.get('*', (req, res) => {
  res.sendFile(DIST);
});

// v4로 오면서 컨테이너로써의 기능을 상실하게 된다.
// 즉 Route 컴포넌트는 자식을 가질 수 없게 됐다.
import React from 'react/lib/React';

import Link from 'react-router-dom/es/Link';
const Menu = () => (
  <div>
    <header>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/about/name">About - Name</Link></li>
        <li><Link to="/about/redirect0">About - RedirectTo: Portfolio #0</Link></li>
        <li><Link to="/about/redirect1">About - RedirectTo: Portfolio #1</Link></li>
        <li><Link to="/portfolio">Portfolio - All</Link></li>
        <li><Link to="/portfolio/0">Portfoilo - #0</Link></li>
        <li><Link to="/portfolio/1">Portfoilo - #1</Link></li>
      </ul>
    </header>
  </div>
);

export default Menu;

// Portfolio.js
import React from 'react/lib/React';

const Portfolio = ({ match: {params: {id}} }) =>  {
  const allList = [
    { id: 0, text: 'portfolio #0' },
    { id: 1, text: 'portfolio #1' }
  ];
  const filterList = id ? allList.filter(v => v.id === +id) : allList;
  const renderList = filterList.map(v =>
    <li key={v.id}>{v.text}</li>
  );
  return (
    <div>
      <h2>Portfolio</h2>
      <ul>{renderList}</ul>
    </div>
  );
};

export default Portfolio;

// App.js
import React, {Component} from 'react/lib/React';

// import { BrowserRouter, HashRouter, Route, Redirect, Switch } from 'react-router-dom';
// 리액트 라우터를 코드 스플리팅 하려면 위 코드를 이렇게 하나씩 불러와야한다 귀찮 ㅠ
import BrowserRouter from 'react-router-dom/es/BrowserRouter';
import HashRouter from 'react-router-dom/es/HashRouter';
import Route from 'react-router-dom/es/Route';
import Redirect from 'react-router-dom/es/Redirect';
import Switch from 'react-router-dom/es/Switch';

import Menu from './components/Menu';

// HTML5 History API 지원여부 파악
const isBrowserHistory = history.pushState;
const Router = isBrowserHistory ? BrowserRouter : HashRouter;

// 리액트 라우터 4에서 코드 스플리팅 하기.
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
const asyncComponent = getComponent => (
  class AsyncComponent extends Component {
    constructor() {
      super();
      this.state = {Component: AsyncComponent.Component};
    }

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          AsyncComponent.Component = Component;
          this.setState({Component});
        });
      }
    }
    render() {
      const {Component} = this.state;
      if(Component) {
        return <Component {...this.props} />;
      }
      return null;
    }
  }
);

const About = asyncComponent(() => import('./components/About').then(module => module.default));
const Home = asyncComponent(() => import('./components/Home').then(module => module.default));
const Name = asyncComponent(() => import('./components/Name').then(module => module.default));
const Portfolio = asyncComponent(() => import('./components/Portfolio').then(module => module.default));

const App = () => (
  // v3에는 Router 속성에 browserRouter or hashRouter가 들어갔는데,
  // v4에는 BrowserRouter or HashRouter가 Router까지 포함한다.
  // 또한 Router 안에는 하나의 컴포넌트만 들어가야한다.
  // 따라서 div 같은 컴포넌트로 그 안을 한 번 감싸줘야한다.
  // 또한 IndexRoute는 Route 컴포넌트의 exact라는 속성으로 대체되었다.
  // Redirect 컴포넌트는 Switch 컴포넌트로 감싸줘야 정상 작동한다.
  // 또한 파라미터는 괄호를 써서 생략 가능하던 것이 불가능해졌다.
  <Router>
    <div>
      <Menu/>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/about/name" component={Name} />
      <Switch>
        <Redirect to="/portfolio/0" from="/about/redirect0"/>
        <Redirect from="/about/redirect1" to="/portfolio/1"/>
      </Switch>
      <Route exact path="/portfolio" component={Portfolio} />
      <Route path="/portfolio/:id" component={Portfolio} />
    </div>
  </Router>
);

export default App;