[구구단 게임] 함수 컴포넌트

함수로 만들어보기

 

 

 

 

 

rfce는 export default가 아래에 작성됨 

 

 

index.js에서도 컴포넌트 바꿔준다.

 

 

 

import React, { useState } from "react";

function GuguFunction() {
  //useState
  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("");
  const [score, setScore] = useState(0);

  const submit = (e) => {
    e.preventDefault(); //submit이벤트중지 -> 입력창 값 사라지는것
    if (parseInt(value) === first * second) {
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setResult("딩동댕💘");
      setValue("");
      setScore(score + 1);
    } else {
      setResult("땡 ! 틀렸습니다.");
      setValue("");
      setScore(score - 1);
    }

    e.target.firstChild.focus(); //커서를 입력창으로 이동
  };
  return (
    <>
      <div>
        <h2>✖구구단 게임✖</h2>
        {first} 곱하기 {second} 는?
      </div>
      <form onSubmit={submit}>
        <input
          type="number"
          onChange={(e) => setValue(e.target.value)}
          value={value}
        />
        <button>입력!</button>
      </form>
      <div>{result}</div>
      <div>당신의 점수는 {score}점 입니다. </div>
    </>
  );
}

export default GuguFunction;