[실습/2주차] 숫자게임 만들기

0주차 때 바닐라JS 복습할 때 만들었던 숫자게임 React로 만들기!

☑️ 실습코드

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.tsx

import { useEffect, useState } from "react";
import "./App.css"; //import를 써서 css 받아옴

function App() {
  //ts코드를 작성
  const [answer, setAnswer] = useState(0);
  const [life, setLife] = useState(5);
  const [userAns, setUserAns] = useState("");
  const [hint, setHint] = useState("Guess");
  const [isCor, setIsCor] = useState(false);


  useEffect(() => {
  setAnswer(Math.floor(Math.random() * 100));
  }, []); 

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserAns(e.target.value); //event 안에 target 안에 있는 value를 받아야 함
  };
  
  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); //event가 실행될 때마다 창이 새로고침되는 것을 막음
    setLife((prev) => prev - 1);
    if(Number(userAns) === answer){
      setIsCor(true);
    } else{
      if(Number(userAns) > answer){
        setHint("Down");
      } else{
        setHint("Up");
      }
    }
    check();
  };

  const check = () => {
    if(life === 1){
      setIsCor(true);
      setUserAns(`Game Over, The answer is ${answer}`);
    }
  }

  return (
  //html 코드를 작성
  <div>
    <h1>Numbers!</h1>
    <div className="answer">{isCor ? userAns : "?"}</div> //삼향연산자
    <form onSubmit={(e) => handleOnSubmit(e)}>
      <input type="number" onChange={(e) => handleOnChange(e)}/>
      <button>submit</button>
    </form>
    <div>{life}</div> //html에서 중괄호 안의 내용들은 js
    <div>{hint}</div>
  </div>);
}

export default App; //마지막에 내용들을 내보내기 위해 export를 해줘야 함

App.css

.answer{
    border : 5px dashed black;
    text-align: center;
    width: 600px;
    height: 200px;
    padding: 50px;
}

☑️ 결과 화면

추가된 기능은 목숨! 처음에 목숨을 5개 부여한다. submit 버튼을 누를 때마다 목숨이 하나씩 줄어든다.똑같이 숫자 크기를 비교해서 UP과 DOWN을 출력.목숨 5번 다 쓰면 위와 같은 문구를 띄우면서 정답을 알려준다.맞으면 저렇게 답을 띄워주는데
개선할 점은 목숨이 다해도 계속 마이너스로 줄어든다는 점!