diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 0000000..4970a5c
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,13 @@
+const {
+ addDecoratorsLegacy, // decorator를 사용할 수 있도록 해주는 config
+ disableEsLint,
+ override,
+} = require("customize-cra");
+
+// 사용자 정의 웹팩 설정
+module.exports = {
+ webpack: override(
+ disableEsLint(),
+ addDecoratorsLegacy()
+ ),
+};
diff --git a/package.json b/package.json
index 7de65cb..78179a5 100644
--- a/package.json
+++ b/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
+ }
+ ]
+ ]
}
}
diff --git a/src/App.js b/src/App.js
index d09208d..53e1c4a 100644
--- a/src/App.js
+++ b/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 (
);
}
diff --git a/src/components/Description.jsx b/src/components/Description.jsx
index 17ea729..7abb3d7 100644
--- a/src/components/Description.jsx
+++ b/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 당신의 돈 국밥으로 환산해보셨습니까?
;
+ const {userInput} = this.props;
+ return (당신의 돈 국밥으로 환산해보셨습니까?
+ 당신이 알고싶은 국밥가 : {userInput.price}
);
}
}
diff --git a/src/components/PriceForm.jsx b/src/components/PriceForm.jsx
new file mode 100644
index 0000000..cc3af2d
--- /dev/null
+++ b/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 (
+
+
)
+ }
+}
+
+export default PriceForm;
\ No newline at end of file
diff --git a/src/store/UserInput.js b/src/store/UserInput.js
new file mode 100644
index 0000000..b21cca4
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..f4fb839
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,4 @@
+import UserInput from "./UserInput";
+
+const userInput = new UserInput();
+export {userInput};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e3c977e..63d1e86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -266,7 +266,7 @@
"@babel/helper-remap-async-to-generator" "^7.1.0"
"@babel/plugin-syntax-async-generators" "^7.2.0"
-"@babel/plugin-proposal-class-properties@7.5.5":
+"@babel/plugin-proposal-class-properties@7.5.5", "@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==
@@ -274,7 +274,7 @@
"@babel/helper-create-class-features-plugin" "^7.5.5"
"@babel/helper-plugin-utils" "^7.0.0"
-"@babel/plugin-proposal-decorators@7.6.0":
+"@babel/plugin-proposal-decorators@7.6.0", "@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 @@ mkdirp@0.5.1, 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"