BearCola
5/1/2019 - 10:57 PM

React Hooks 에서 ref 사용하기

hooks.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <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"></script>
    <title>Document</title>
  </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) {
            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={onSubmitForm}>
              <input ref={inputRef} value={value} onChange={onChangeInput} />
              <button>입력!</button>
            </form>
            <div id="result">{result}</div>
          </React.Fragment>
        );
      };
    </script>
    <script type="text/babel">
      ReactDOM.render(
        <React.Fragment>
          <GuGuDan />
        </React.Fragment>,
        document.querySelector("#root")
      );
    </script>
  </body>
</html>