Merge pull request #8 from damyo-scientists/#6_apply_mobx

mobx 1차 적용

config-overrides.js

@@ -0,0 +1,13 @@
+const {
+  addDecoratorsLegacy, // decorator를 사용할 수 있도록 해주는 config
+  disableEsLint,
+  override,
+} = require("customize-cra");
+
+// 사용자 정의 웹팩 설정
+module.exports = {
+  webpack: override(
+    disableEsLint(),
+    addDecoratorsLegacy()
+  ),
+};

package.json

@@ -3,15 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "customize-cra": "^0.8.0",
+    "mobx": "^5.14.2",
+    "mobx-react": "^6.1.4",
     "react": "^16.10.2",
+    "react-app-rewired": "^2.1.4",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -27,5 +33,24 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ]
+    ]
   }
 }

src/App.js

@@ -1,45 +1,22 @@
-import React, { Component } from "react";
-import logo from "./logo.svg";
+import React, {Component} from "react";
 import Description from "./components/Description";
+import PriceForm from "./components/PriceForm";
 import "./App.css";
+import {userInput} from "./store";
+import {observer, Provider} from "mobx-react";
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.state = { value: "" };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({ value: event.target.value });
-  }
-
-  handleSubmit(event) {
-    let gookbabCount = parseInt(this.state.value, 10);
-
-    let converted = gookbabCount / 5000;
-    alert("고것은 " + converted + " 국밥이네요.");
-
-    event.preventDefault();
   }
 
   render() {
     return (
       <div>
-        <form onSubmit={this.handleSubmit}>
-          <label>
-            가격:
-            <input
-              type="text"
-              value={this.state.value}
-              onChange={this.handleChange}
-            />
-          </label>
-          <input type="submit" class="btnClass" value="확인" />
-        </form>
-        <Description />
+        <Provider>
+          <PriceForm userInput={userInput}/>
+          <Description userInput={userInput}/>
+        </Provider>
       </div>
     );
   }

src/components/Description.jsx

@@ -1,8 +1,18 @@
-import React, { Component } from "react";
+import React, {Component} from "react";
+import {inject, observer} from "mobx-react";
 
+@inject('userInput')
+@observer
 class Description extends Component {
+  constructor(props) {
+    super(props);
+    console.log(props);
+  }
+
   render() {
-    return <h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>;
+    const {userInput} = this.props;
+    return (<div><h2>당신의 돈 국밥으로 환산해보셨습니까?</h2>
+      <h3>당신이 알고싶은 국밥가 : {userInput.price}</h3></div>);
   }
 }
 

src/components/PriceForm.jsx

@@ -0,0 +1,48 @@
+import {userInput} from "../store";
+import {inject, observer} from "mobx-react/dist/mobx-react";
+import React, {Component} from "react";
+
+@inject('userInput')
+@observer
+class PriceForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    const {userInput} = this.props;
+    userInput.setPrice(event.target.value);
+  }
+
+  handleSubmit(event) {
+    const {userInput} = this.props;
+    let gookbabCount = parseInt(userInput.price, 10);
+
+    const converted = gookbabCount / 5000;
+    alert("고것은 " + converted + " 국밥이네요.");
+
+    event.preventDefault();
+  }
+
+  render() {
+    const {userInput} = this.props;
+    return (<div>
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          가격:
+          <input
+            type="text"
+            value={userInput.price}
+            onChange={this.handleChange}
+          />
+        </label>
+        <input type="submit" className="btnClass" value="확인"/>
+      </form>
+    </div>)
+  }
+}
+
+export default PriceForm;

src/store/UserInput.js

@@ -0,0 +1,9 @@
+import {observable, action} from "mobx";
+
+export default class UserInput {
+  @observable price = '';
+
+  @action setPrice(price) {
+    this.price = price;
+  }
+}

src/store/index.js

@@ -0,0 +1,4 @@
+import UserInput from "./UserInput";
+
+const userInput = new UserInput();
+export {userInput};

yarn.lock

@@ -266,15 +266,15 @@
     "@babel/helper-remap-async-to-generator" "^7.1.0"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
 
-"@babel/[email protected]":
+"@babel/[email protected]", "@babel/plugin-proposal-class-properties@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
   integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.5.5"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/[email protected]":
+"@babel/[email protected]", "@babel/plugin-proposal-decorators@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
   integrity sha512-ZSyYw9trQI50sES6YxREXKu+4b7MAg6Qx2cvyDDYjP2Hpzd3FleOUwC9cqn1+za8d0A2ZU8SHujxFao956efUg==
@@ -3040,6 +3040,13 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
+customize-cra@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-0.8.0.tgz#011e65fde9e443733668551740b76e3eefe95822"
+  integrity sha512-fIiuM4sJfDmTc+0ctNV0BCnSTsfq76bpAOHvUCrCzWaG1dHpHw2Yfec+liH4EdicG5TuwhYLFt2yY2ocJ8HoxA==
+  dependencies:
+    lodash.flow "^3.5.0"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5943,6 +5950,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6289,6 +6301,23 @@ [email protected], mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mobx-react-lite@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-1.5.0.tgz#a5867fa1114b19056cf8159e8d64766596ae85a0"
+  integrity sha512-Ss8RLKKGn+QhKbfCHvQ4+RPEVKR8AnPW1wNyWzZAS3wYw7UP4FX6GdRn64sdOhrP646o/JtXbLuDuc4RH3Bqyg==
+
+mobx-react@^6.1.4:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-6.1.4.tgz#818e7991c321c05bd9b8156d94be17dad165501e"
+  integrity sha512-wzrJF1RflhyLh8ne4FJfMbG8ZgRFmZ62b4nbyhJzwQpAmrkSnSsAWG9mIff4ffV/Q7OU+uOYf7rXvSmiuUe4cw==
+  dependencies:
+    mobx-react-lite "^1.4.2"
+
+mobx@^5.14.2:
+  version "5.14.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.14.2.tgz#608b8ee9bc9f9e406b48da676e677b150e901eba"
+  integrity sha512-yx5Xe6o2WSYFgeytzZt6jGaYghJdQbd1ElR7S2s93x7/+5SYfJBfutvZF1O5gPEsUyTAFZ5IMYGu1KyhkPk+oQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8026,6 +8055,13 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "0.13.3"
     whatwg-fetch "3.0.0"
 
+react-app-rewired@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.4.tgz#7d8bb1f6559693f893cadc890d40b540402400cc"
+  integrity sha512-OEd3xWIqk+6HJyi4/uogBphbZqaZXOIv+Mz/DWLZKdzmWdYpXJgeatHcFUjWfj/vsJIDLMI2KaS/FwdAwlkTGw==
+  dependencies:
+    semver "^5.6.0"
+
 react-dev-utils@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"