React-router - react-hot-loader

ReactJS - react-hot-loader

react-router v4 version4

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

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

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

Install react-hot-loader

react-hot-loader는 코드의 바뀐 부분을 실시간으로 반영해주는 plugin이다.

설치할 때 꼭 버전을 준수하자 react-hot-loader@next

~cra-router$ yarn add react-hot-loader@next

entry 를 다시 배열 형태로 돌려준다.

~cra-router/config$ webpack.config.dev.js : entry

entry: [

      'react-hot-loader/patch',

      'react-dev-utils/webpackHotDevClient',

      'react-error-overlay',

      require.resolve('./polyfills'),

      paths.appIndexJs,

  ],

babel-loader검색하여 해당 로더 내부에 plugins설정

~cra-router/config$ webpack.config.dev.js : babel-loader

{

            test: /\.(js|jsx|mjs)$/,

            include: paths.appSrc,

            loader: require.resolve('babel-loader'),

            options: {

              cacheDirectory: true,

              plugins: [

                  'react-hot-loader/babel',

              ]

            },

  },

서버를 재시작하고 다음 파일을 생성하고 작성한다.

~cra-router/client$Root.js

import React from 'react';

import App from '../App';

const Root = () => {

    return (

        <div>

        <App />

        </div>

    );

};

export default Root;

다음경로 파일을 수정한다.

~cra-router/src$ index.js

import React from 'react';

import ReactDOM from 'react-dom';

import Root from './client/Root';

import registerServiceWorker from './registerServiceWorker';

import { AppContainer } from 'react-hot-loader';

import './index.css';

//import App from './App';

    ReactDOM.render(

    //<App />,

    <AppContainer>

        <Root />

    </AppContainer>,

        document.getElementById('root'),

    );

if (module.hot) {

    module.hot.accept('./client/Root', () => {

         ReactDOM.render(

             <AppContainer>

                <Root/>

             </AppContainer>,

             document.getElementById('root')

         );

     });

}

registerServiceWorker();

웝브라우저에 보여지는 페이지 아무 파일이나 수정을 해본다.

필자는 Home.js파일의 Home부분을 IHome로 바꾸어 보았다.

새로고침 하지 않아도 자동으로 반영된다.