인프런 커뮤니티 질문&답변

현영님 해결됬습니다. 너무 감사드립니당^^

setTries((prevTries) => {
          [
            ...prevTries,
            { try: value, result: `${strike}스트라이크 ${ball}볼입니다.` },
          ];
        });

여기서 return을 안 하셨습니다.

setTries((prevTries) => {
          return [
            ...prevTries,
            { try: value, result: `${strike}스트라이크 ${ball}볼입니다.` },
          ];

});

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

function getNumbers() {
  // 숫자 4개를 겹치지 않고 랜덤하게 뽑는 함수
  const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  const array = [];

  for (let i = 0; i < 4; i += 1) {
    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 onRefInput = useRef(null);

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

  const onSubmitForm = (e) => {
    e.preventDefault();
    if (value === answer.join("")) {
      setResult("홈런!");
      setTries((prevTries) => {
        return [...prevTries, { try: value, result: "홈런!" }];
      });
      alert(`정답입니다! 정답은 ${answer.join("")} 입니다.`);
      alert("게임을 다시 시작합니다.");
      setValue("");
      setAnswer(getNumbers());
      setTries([]);
    } else {
      console.log(answer.join(""));
      const answerArray = value.split("").map((v) => parseInt(v));
      let strike = 0;
      let ball = 0;
      if (tries.length >= 9) {
        // 10번 이상 틀렸을 때
        setResult(`10번 이상 틀려서 실패! 정답은 ${answer.join("")} 입니다.`);
        alert(`10번 이상 틀려서 실패! 정답은 ${answer.join("")} 입니다.`);
        alert("게임을 다시 시작합니다.");
        setValue("");
        setAnswer(getNumbers());
        setTries([]);
      } else {
        // 답 틀렸으면
        for (let i = 0; i < 4; i += 1) {
          if (answerArray[i] === answer[i]) {
            strike += 1;
          } else if (answer.includes(answerArray[i])) {
            ball += 1;
          }
        }
        setTries((prevTries) => {
          [
            ...prevTries,
            { try: value, result: `${strike}스트라이크 ${ball}볼입니다.` },
          ];
        });
        setResult(`틀렸습니다. ${9-tries.length}번 남았습니다.`);
      }
    }
    onRefInput.current.focus();
  };

  return (
    <>
      <h3>{result}</h3>
      <form onSubmit={onSubmitForm}>
        <input
          type="number"
          value={value}
          onChange={onChangeInput}
          maxLength={4}
          ref={onRefInput}
        />
      </form>
      <div>시도: {tries.length}</div>
      <ul>
        {/* 반복되는 내용은 배열로 만들어서 map 함수로 반복한다. */}
        {tries.map((item, index) => {
          return (
            // key로 index를 쓰면 나중에 성능 최적화 시 문제가 되므로 쓰지 않는다.
            // 컴포넌트로 분리(큰 컴포넌트로 부터 작은 컴포넌트를 분리하는 탑다운 방식), props로 값 전달
            <Try_hooks key={item + index} value={item} index={index} />
          );
        })}
      </ul>
    </>
  );
};

export default NumberBaseball;

초기 배열이 빈 배열([])이더라도 length를 쓸 수 있습니다. 코드를 보여주세요.