CRA3 에서 craco + Mobx + React-hot-loader 적용하기

 Mobx와 carco를 사용하여 react-hot-loader 도 힙한 방법(React hook지원)으로 적용하기.

 

 

1. 먼저 패키지를 설치한다.

 

yarn add react-hot-loader @hot-loader/react-dom
yarn add -D @craco/craco

 

2. package.json 에 react-script가 아닌 craco로 실행하게 한다.

 

/* package.json */

...



"scripts": { 

    "start": "craco start",

    "build": "craco build"

    "test": "craco test" 
}

...

 

 

 

3. package.json 이 있는 폴더에 craco.config.js 를 생성하여 다음과 같이 내용을 입력한다.

 

module.exports = {

    resolve: {

        alias: { 'react-dom': '@hot-loader/react-dom', },

    }

}

 

 

4. Provider 안에 들어가는 hot-loader을 적용할 컴포넌트를 지정

 

/* App.tsx */

import { hot } from 'react-hot-loader/root'

import { observer } from 'mobx-react'

...



const App = () => { ... }



...

export default hot(observer(App))