[React 구구단] React 구구단 웹 게임

안녕하세요. 엄티 입니다. 

오늘은 React로 간단한 구구단 게임을 만들어 보겠습니다.

기본적인 Project 세팅은 앞선 제 포스팅을 참고 부탁 드립니다.

 

React project setting

[React 구구단] React 프로젝트 셋팅

참고: 제 포스팅은 '제로초' 님 강의를 제 나름대로 정리한 것입니다. 자세한 정보를 알고 싶으시면 '제로초' 님 강의를 참고해 주세요.

 

'제로초' 님의 리액트 무료 강좌(웹게임)

리액트 무료 강좌(웹게임) - YouTube

그럼 일단 두 가지 버전으로 코드를 구성 하였는데요. 

1. 기본적인 Class

2. Hooks

 

Hooks는 페이스북에서 권고하는  React 방법입니다.

허나 대부분의 React 코드들이 Class로 구성되어있기 때문에 Class로도 구성해보고 Hooks 로도 구성해보았습니다.

앞으로는 '제로초' 님의 강좌에 따라 코드를 구성해보겠습니다.

 

1. Class

import React from 'react';

class ClassApp extends React.Component {
  state = {
   first: Math.ceil(Math.random() * 9),
   second: Math.ceil(Math.random() * 9),
   value: '',
   result: ''
  };
  input;

  _onSubmit = (event) => {
    event.preventDefault();
    if (this.state.first * this.state.second === parseInt(this.state.value)) {
      // state를 변경 시에는 setState 메소드를 사용 해야 합니다.
      this.setState((prevState) => {
        return {
          first: Math.ceil(Math.random() * 9),
          second: Math.ceil(Math.random() * 9),
          value: '',
          result: prevState.value + ' Correct'
        }
       }); // setState 는 비동기이기 때문에 prevState를 해줘야 예상치 못한 버그를 안낼 수 있다.

      this.input.focus(); // Cursor를 옮겨준다.
    } else {
      this.setState((prevState) => {
        return {
          value: '',
          result: prevState.value + ' Wrong'
        }
      });

      this.input.focus(); // Cursor를 옮겨준다.
    }
  }

  _onChange = (event) => {
    this.setState({value: event.target.value}) // State를 변경 해준다. (value 변경)
  }

  _onInputRef = (ref) => {
    this.input = ref;
  } // Input cursor를 세팅해준다.

  render() {
    console.log('Rendering');
    return (
      <>
        <div>{this.state.first} * {this.state.second} = ? </div>
        <form onSubmit={this._onSubmit}>
          <input ref={this._onInputRef} type='number' value={this.state.value} onChange={this._onChange}/>
          <button>Insert!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    );
  }
}

export default ClassApp;

 

코드에 대한 설명은 주석을 참고하시면 됩니다. 그러나 기본적인 코드 (Math.ceil(Math.random() 와 같은 js기본 문법)에 대한 설명은 없습니다.

 

2. Hooks

import React from 'react';
const { useState, useRef }  = React;

const HooksApp = () => {
  const [first, setFirst] = useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState('');
  const [result, setResult] = useState(''); // Hooks state 사용법
  const input = useRef(null); // Hooks ref 사용법

  const _onChange = (event) => {
    // state 변경은 각각 해줘야 합니다.
    // 기본 Class 에서는 setState 메소드를 이용하여 여러가지를 한번에 변경 할 수도 있었지만, Hooks에서는 아닙니다.
    setValue(event.target.value);
  };

  const _onSubmit = (event) => {
    event.preventDefault();
    if (first * second === parseInt(value)) {
      // 기본 Class 에서는 setState 메소드를 이용하여 여러가지를 한번에 변경 할 수도 있었지만, Hooks에서는 아닙니다.
      setResult(value + ' Correct');
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setValue('');

      input.current.focus(); // Cursor를 옮겨준다.
    } else {
      setResult(value + ' Wrong');
      setValue('');

      input.current.focus();
    }
  }

  console.log('Rendering !!');

  return (
    <>
      <div>{first} * {second} = ? </div>
      <form onSubmit={_onSubmit}>
        <input ref={input} onChange={_onChange} type='number' value={value}/>
        <button>Insert!</button>
      </form>
      <div>{result}</div>
    </>
  )

}

export default HooksApp;

 

이렇게 두 가지 방법으로 코드를 구성해 봤습니다. 이제 이 두 가지 파일을 각가 불러서 테스트 해보면 됩니다.

import React from 'react';
import ReactDOM from 'react-dom';

import ClassApp from './gugudan'; // Class 사용
// import HooksApp from './gugudan-hooks'; // Hooks 사용

ReactDOM.render(<ClassApp />, document.getElementById('root')); // Class 사용
// ReactDOM.render(<HooksApp />, document.getElementById('root')); // Hooks 사용

client.jsx는 다음과 같이 구성 해 주고 사용하지 않는 코드는 주석 처리를 하여 문제가 없이 만들어 줍니다.

 

$ npm run test

webpack을 이용하여 빌드한 뒤 index.html을 열어 줍니다.

 

결과

 

어렵지 않죠?

다음에는 '제로초' 님 강좌에 맞춰서 끝말잇기를 만들어 보도록 하겠습니다.