[React.js] React Web Games - Multiplication Game (Functional Component)

Knowledge/React.js

by winCow 2021. 7. 19. 17:31

1. Functional Component

함수형 컴포넌트는 초기에, state나 ref를 쓰지 않는 경우에 사용되었다. 그러나 이제는 함수형 컴포넌트에서도 state와 ref를 사용할 수 있게 되었는데, 이것이 Hooks이다.

<html>
  <head>
    <title>구구단</title>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const GugudanFunction = () => {
        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();
          }
        };
        console.log("렌더링~");

        return (
          <React.Fragment>
            <div>
              {first} x {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(<GugudanFunction />, document.querySelector("#root"));
    </script>
  </body>
</html>

클래스형 컴포넌트로 만든 구구단 게임을 함수형 컴포넌트로 리팩토링했다.

        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();
          }
        };

함수형 컴포넌트에서는 사용할 변수들을 객체로 선언하지 않고, 위와 같이 구조 분해 할당과 useState를 통해서 각각의 변수와 각각의 변수에 해당하는 전용 set 함수를 설정해 주어야 한다. useState의 매개변수로는 변수의 초기값을 전달한다. ref를 사용할 때도 useRef를 이용해 만들어야 한다. 이를 사용해서 DOM에 접근할 때는, onSubmitForm의inputRef.currnet.focus()와 같이, 메소드에 current를 추가해 주면 된다.

        console.log("렌더링~");

        return (
          <React.Fragment>
            <div>
              {first} x {second} = ?
            </div>
            <form onSubmit={onSubmitForm}>
              <input ref={inputRef} onChange={onChangeInput} value={value} />
              <button>입력!</button>
            </form>
            <div id="result">{result}</div>
          </React.Fragment>
        );
      };

console.log("렌더링~")은 GugudanFunction의 스테이트가 바뀔 때마다, 즉 setState가 실행될 때마다 실행되는 것을 확인할 수 있는데, 클래스형 컴포넌트와 달리 return 밖에 존재하는 경우에도 실행된다. 왜냐하면, 함수형 컴포넌트에서는 스테이트가 바뀔 때마다 함수 전체가 다시 실행되기 때문이다. 이는 속도 저하의 원인이 될 수 있다.

또, JSX에서는 HTML 속성을 쓸 때, class는 className으로, for는 htmlFor로 바꿔서 작성해야 한다.

'Knowledge > React.js' 카테고리의 다른 글

[React.js] React Web Games - Number Baseball (Class & Hooks) (0)	2021.07.23
[React.js] React Web Games - Multiplication Game (Webpack) (0)	2021.07.19
[React.js] React Web Games - Multiplication Game (0)	2021.07.08
[React.js] React Web Games - Ancient React & JSX (0)	2021.07.08
[React.js] react-movie-app (0)	2021.06.29