Joooohee/index.html

## index.html
<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 [result, setResult] = React.useState("");
        const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
        const [value, setValue] = React.useState("");
        const [second, setSecond] = React.useState(
          Math.ceil(Math.random() * 9)
        );

        const inputRef = React.useRef(null);

        const onChangeInput = e => {
          setValue(e.target.value);
        };

        const onSubmit = e => {
          e.preventDefault();
          if (parseInt(value) === first * second) {
            setResult("정답" + value);
            setFirst(Math.ceil(Math.random() * 9));
            setSecond(Math.ceil(Math.random() * 9));
            setValue("");
            inputRef.current.focus();
          } else {
            setResult("땡");
            setValue("");
          }
        };

        return (
          <React.Fragment>
            <div>
              {first} 곱하기{second} 는?
            </div>
            <form onSubmit={onSubmit}>
              <input
                ref={inputRef}
                type="number"
                value={value}
                onChange={onChangeInput}
              />
              <button>입력!</button>
            </form>
            <div>{result}</div>
          </React.Fragment>
        );
      };
    </script>
    <script type="text/babel">
      ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
    </script>
  </body>
</html>
	<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 [result, setResult] = React.useState("");
	const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
	const [value, setValue] = React.useState("");
	const [second, setSecond] = React.useState(
	Math.ceil(Math.random() * 9)
	);

	const inputRef = React.useRef(null);

	const onChangeInput = e => {
	setValue(e.target.value);
	};

	const onSubmit = e => {
	e.preventDefault();
	if (parseInt(value) === first * second) {
	setResult("정답" + value);
	setFirst(Math.ceil(Math.random() * 9));
	setSecond(Math.ceil(Math.random() * 9));
	setValue("");
	inputRef.current.focus();
	} else {
	setResult("땡");
	setValue("");
	}
	};

	return (
	<React.Fragment>
	<div>
	{first} 곱하기{second} 는?
	</div>
	<form onSubmit={onSubmit}>
	<input
	ref={inputRef}
	type="number"
	value={value}
	onChange={onChangeInput}
	/>
	<button>입력!</button>
	</form>
	<div>{result}</div>
	</React.Fragment>
	);
	};
	</script>
	<script type="text/babel">
	ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
	</script>
	</body>
	</html>