[React] 숫자야구 만들기 ( Hooks )

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

클래스에서 Hooks로 바꿀때는 useState, useRef 를 import해야함

그리고나선 this.state를 지우자!

 

이전값이 필요하다면 함수형으로 사용하자! 

setTries((prevTries) => [...prevTires, {try :value, result :'홈런'}]);

 

Hooks버전

NumberBaseball.jsx

import React ,{ useRef, useState } from "react";
import Try from "./Try";

const getNumbers = () => {
  // 숫자 네개를 곂치지 않고 랜덤하게 뽑는 함수
  const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  const array = [];
  for (let i = 0; i < 4; i++) {
    const chosen = candidate.splice(
      Math.floor(Math.random() * (9 - i)), 1)[0];
    array.push(chosen);
  };
  return array;
};

const NumberBaseball = () => {
  const [result, setResult] = useState();
  const [value, setValue] = useState();
  const [answer, setAnswer] = useState(getNumbers());
  const [tries, setTries] = useState([]);
  const inputEl = useRef(null);

  const onSubmitForm = (e) => {
    e.preventDefault();
    if (answer.join("") === value) {
      setResult('홈런!');
      setTries((prevTries) => {
        return [...prevTries, { try: value, result: "홈런!" }]
      });
      setResult();
      alert("게임 재시작");
      SetValue('');
      setAnswer(getNumber());
      setTries([]);
    } else { //틀린경우
      const answerArray = value.split("").map((e) => parseInt(e));
      let strike = 0;
      let ball = 0;
      if (tries.length >= 9) {
        setResult(`10번 넘데 틀려서 실패 답은 ${answer.join(',')}였습니다`);
        alert("게임 재시작");
        setResult('');
        setValue('');
        setAnswer(getNumber());
        setTries([]);
      } else {
        for (let i = 0; i < 4; i++) {
          if (answerArray[i] === answer[i]) strike++;
          else if (answer.includes(answerArray[i])) ball++;
        }
        setTries((preTries) => [
          ...preTries,
          {
            try: value,
            result: `${strike}스크라이크 ${ball}볼`,
          },
        ]);
        setValue('');
        inputEl.current.focus();
        };
      }
    };
  

  const onChangeInput = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
        <h1>숫자야구</h1>
        <form onSubmit={onSubmitForm}>
          <input
            ref={inputEl}
            maxLength={4}
            value={value}
            onChange={onChangeInput}
          />
        </form>
        <div>시도 : {tries.length}</div>
        <div>시도 : {result}</div>
        <ul>
          {tries.map((v, i) => {
            return (<Try key={i} tryInfo={v} />)
          })}
        </ul>
      </>
  )
}

 

try.js

import React from 'react';

const Try = ({tryInfo}) => {
    return (
        <li>
		<div>{tryInfo.try}</div>
		<div>{tryInfo.result}</div>
	</li>
    )
}