React Hooks

2020-12-19 15:14:45 +09:00
parent ee65cd737a
commit 73976a7349
1 changed files with 57 additions and 0 deletions
--- a/react_webgame/main/index_hooks.html
+++ b/react_webgame/main/index_hooks.html
@@ -0,0 +1,57 @@
+<html>
+	<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">
+			const GuGuDan = () => {
+				const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
+				const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
+				const [value, setValue] = React.useState('');
+				const [result, setResult] = React.useState('');
+				
+				const inputRef = React.useRef(null);
+
+				const onChangeInput = (e) => {
+					setValue(e.target.value);
+				};
+
+				const onSubmitForm = (e) => {
+					e.preventDefault();
+					if(parseInt(this.state.value) === this.state.first * this.state.second) {
+						setResult('정답: ' + value);
+						setFirst(Math.ceil(Math.random() * 9));
+						setSecond(Math.ceil(Math.random() * 9));
+						setValue('');
+						inputRef.current.focus();
+					} else {
+						setResult('땡');
+						setValue('');
+						inputRef.current.focus();
+					}
+				}
+
+				return (
+						<React.Fragment>
+								<div>{first} 곱하기 {second}는?</div>
+								<form onSubmit={}>
+										<input ref={inputRef} onChange={onChangeInput} value={value} />
+										<button>입력!</button>    
+								</form>
+								<div id="result">{result}</div>
+						</React.Fragment>
+				);
+			}
+
+		</script>
+		<script type="text/babel">
+				ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
+		</script>
+	</body>
+</html>