taewo/App.js

## App.js
<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/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(value) === first * second) {
                        setFirst(Math.ceil(Math.random() * 9))
                        setSecond(Math.ceil(Math.random() * 9))
                        setValue('')
                        setResult('정답')
                        inputRef.current.focus()
                    } else {
                        setValue('')
                        setResult('땡')
                    }
                }
                console.log('렌더링')
                return (
                    <React.Fragment>
                        <div>{first} 곱하기 {second}는?</div>
                        <form onSubmit={onSubmitForm}>
                            <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>
	<html>
	<head>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/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(value) === first * second) {
	setFirst(Math.ceil(Math.random() * 9))
	setSecond(Math.ceil(Math.random() * 9))
	setValue('')
	setResult('정답')
	inputRef.current.focus()
	} else {
	setValue('')
	setResult('땡')
	}
	}
	console.log('렌더링')
	return (
	<React.Fragment>
	<div>{first} 곱하기 {second}는?</div>
	<form onSubmit={onSubmitForm}>
	<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>