[React] 참참참 게임 만들기 (2023.05.26)

🎈 참참참 게임 만들기

 

 

📖 게임규칙

1. 나는 공격, 컴퓨터는 수비 담당

2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리

3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리

 

📖 작성코드

 

import React, { useState, useEffect } from "react";

const Ex03 = () => {
  /**
   * 참참참 게임을 만들어보자!
   * 게임 규칙
   * 1. 나는 공격, 컴퓨터는 수비를 담당
   * 2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리
   * 3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리
   *
   * 문제풀이
   * 1. 필요한 state들을 관리 : 내선택, 컴퓨터선택, 게임결과
   *     >> useState
   * 2. 내 선택 >> 내가 누른 버튼의 내용을 선택으로 삼는다.
   *     >> 이벤트 객체
   * 3. 컴퓨터 선택 >> 랜덤하게 받아올 것(pos라는 배열에서)
   *     >> 난수 뽑기
   * 4. 만약 나의 선택에 해당하는 state값이 변한다면 (게임 시작),
   *      승패를 판별해 줄 것
   *     >> useEffect
   * 5. 게임이 시작하기 전에는 "게임결과 : 패배~" 부분이 나오지 않도록 할 것
   *     >> 조건부 렌더링
   */

  let pos = ["좌", "정면", "우"];

  const [myChoice, setMyChoice] = useState("");
  const [comChoice, setComChoice] = useState("");
  const [result, setResult] = useState("");

  //나의 선택을 세팅
  const handleChoice = (e) => {
    setMyChoice(e.target.innerText);

    //컴퓨터 선택을 세팅
    let ran = parseInt(Math.random() * 3 + 1);
    setComChoice(pos[ran]);
  };

  useEffect(() => {
    //게임 결과 판별
    myChoice == comChoice ? setResult("승리") : setResult("패배");
  }, [comChoice]);

  return (
    <div>
      <h1>참참참 게임!</h1>
      <h3>나의 선택 : {myChoice}</h3>
      <h3>컴퓨터의 선택 : {comChoice}</h3>
      {myChoice && <h3>게임 결과 : {result}</h3>}

      {pos.map((item) => (
        <button key={item} onClick={handleChoice}>
          {item}
        </button>
      ))}
    </div>
  );
};

export default Ex03;

 

⚙️ Q&A

 

const [myChoice, setMyChoice] = useState('')

{myChoice && <h3>게임결과 : {result}</h3>}

 

myChoice 의 초기값은 빈문자열

빈문자열이면 false, 문자열이면 true인가?

 

JavaScript에서 문자열 빈 값("")을 제외한 모든 문자열은 true로 간주함!