/ REACT

React로 간단한 구구단게임 만들기

React은 다음과 같이 구성되어 있습니다.

React로 간단한 구구단게임 만들기!

잠깐 시간을 내어 간단한 구구단게임을 만들어 보았다. 기본적으로 React Hooks을 이용하여 만들었다.

react-gugudan-완성된프로그램모습1 react-gugudan-완성된프로그램모습2

만들어본 결과는 위 사진과 같다. media query를 이용하여 반응형으로 만들어보았다.

기본 구조

import { useState } from 'react';
import './App.css';

function App() {
  const [firstNumber, setFirstNumber] = useState(Math.ceil(Math.random() * 9));
  const [secondNumber, setSecondNumber] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");

  const onSubmit = (e) => {
    e.preventDefault();
    if (value === "") {
      setResult('숫자를 입력해주세요!');
    } else if(parseInt(value) === (firstNumber * secondNumber)) {
      setResult('정답!!');
      setFirstNumber(Math.ceil(Math.random() * 9));
      setSecondNumber(Math.ceil(Math.random() * 9));
      setValue("");
    } else {
      setResult('땡! 다시 입력해보세요!');
      setValue("")
    }
  }

  const onChange = (e) => {
    setValue(e.target.value);
  }
  return (
    <div className="App">
      <div className='container'>
        <h1>{firstNumber} X {secondNumber} 은?</h1>
        <form onSubmit={onSubmit} className="form">
          <span>
            <input 
              className='input'
              type="text"
              value={value} 
              onChange={onChange}
            />
          </span>
          <button className='btn'>입력!</button>
          <div className='result'>{result}</div>
        </form>
      </div>
    </div>
  );
}

export default App;

App.js의 내용이다.
일단 firstNumber와 secondNumber는 각각 첫 번째 숫자와 두 번째 숫자를 의미하고 value는 입력한 값, 그리고 result는 정답이 아닌지 맞는지 알려주는데 쓰인다. 이들을 useState를 이용하여 4개의 state를 만들었다. firstNumber와 secondNumber의 초기값은 1부터 9까지의 랜덤한 값으로 주고 value와 result의 초기값은 빈 값으로 주었다.

입력한 값이 정답인지 판단하는 부분은 onSubmit함수이다. 사실 이 부분이 끝이다.

const onSubmit = (e) => {
    e.preventDefault();
    if (value === "") {
      setResult('숫자를 입력해주세요!');
    } else if(parseInt(value) === (firstNumber * secondNumber)) {
      setResult('정답!!');
      setFirstNumber(Math.ceil(Math.random() * 9));
      setSecondNumber(Math.ceil(Math.random() * 9));
      setValue("");
    } else {
      setResult('땡! 다시 입력해보세요!');
      setValue("")
    }
  }

value는 입력한 값이므로, 입력을 하지않고 submit을 했을 경우 숫자를 입력하지 않았기 때문에 ‘숫자를 입력해주세요!’라는 메세지를 띄워준다.
그리고 value값이 첫번째수와 두번째수를 곱한 값과 같을 경우 ‘정답!!’이라는 메세지를, 다를 경우 ‘땡! 다시 입력해보세요!’라는 메세지를 보여주게 만들었다.
여기서 parseInt(value)를 해준 이유는 value가 문자형이기 때문에 number타입으로 바꾸어 비교하기 위한 것이다. 각각의 조건문에 따라 setState함수를 통해 값을 변경해주었다.

react-gugudan-입력하지 않은경우 react-gugudan-정답일경우 react-gugudan-오답일경우
스타일은 내 생각대로 적절하게 css작업을 했다. 어렵지 않게 구구단 웹 게임을 만들어보았다. 완성!!!

Sourse Code : https://github.com/ykkim97/React_GuGuDan

End.