gugudan component

2020-12-17 15:55:46 +09:00
parent 01fb84e6d9
commit ae8200c83c
1 changed files with 60 additions and 28 deletions
--- a/react_webgame/main/index.html
+++ b/react_webgame/main/index.html
@@ -1,30 +1,62 @@
 <html>
-    <head>
-        <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--리액트 핵심 코드-->
-        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 리액트 코드를 웹에 붙이는 역할-->
-        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-    </head>
-    <body>
-        <div id="root"></div> <!-- 결과 : <div id="root"><button>Like</button></div> -->
-        <script type="text/babel">
-            class LikeButton extends React.Component {
-                constructor(props) {
-                    super(props);
-                    this.state = {
-                        liked: false 
-                    };
-                }
-                
-                render() {
-                    return <button type="submit" onClick={() => { this.setState({ liked: true })}}>
-                        {this.state.liked === true ? 'Liked': 'Like'}
-                    </button>; 
-                    // JSX ( JS + XML )
-                }
-            }
-        </script>
-        <script type="text/babel">
-            ReactDOM.render(<div><LikeButton/><LikeButton/><LikeButton/><LikeButton/></div>, document.querySelector('#root'));
-        </script>
-    </body>
+	<head>
+		<meta charset="utf-8"/>
+		<title>구구단</title>
+
+		<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--리액트 핵심 코드-->
+		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 리액트 코드를 웹에 붙이는 역할-->
+		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+	</head>
+	<body>
+		<div id="root"></div> 
+		<script type="text/babel">
+			class GuGuDan extends React.Component {
+				constructor(props) {
+					super(props);
+					this.state = {
+							first: Math.ceil(Math.random() * 9),
+							second: Math.ceil(Math.random() * 9),
+							value: '',
+							result: '',
+					};
+				}
+
+				onSubmit = (e) => {
+					e.preventDefault();
+					if(parseInt(this.state.value) === this.state.first * this.state.second) {
+						this.setState({
+							result: this.state.first + ' * ' + this.state.second 
+									+ ' = ' + this.state.first * this.state.second + ' 정답',
+							first: Math.ceil(Math.random() * 9),
+							second: Math.ceil(Math.random() * 9),
+							value: '',
+						});
+					} else {
+						this.setState({
+							result: '땡',
+							value: '',
+						});
+					}
+				}
+
+				onChange = (e) => this.setState({ value: e.target.value});
+
+				render() {
+					return (
+						<div>
+								<div>{this.state.first} 곱하기 {this.state.second} 는?</div>
+								<form onSubmit={this.onSubmit}>
+										<input type="number" value={this.state.value} onChange={this.onChange}/>
+										<button>입력!</button>
+								</form>
+								<div>{this.state.result}</div>
+						</div>
+					);
+				}
+			}
+		</script>
+		<script type="text/babel">
+				ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
+		</script>
+	</body>
 </html>