react 가위바위보

npx create-react-app test 리엑트 test 파일생성되며 해당 디렉토리안에 React프로젝트의 초기 구조생성

react에서 rafce 
"React Arrow Function Component Export" 의 약어

 

import img01 from "./가위.jpg";
import img02 from "./바위.jpg";
import img03 from "./보.jpg"

// 다수 내보낼때

export{img01,img02,img03};

 

import {useState,useEffect} from "react"
import Block from './components/Block'
import './App.css';
import { img01,img02,img03} from "./img"
// 추억의 자바스크립트
// 가위바위보
// 플레이어 하나 컴퓨터 하나
// 컴포넌트로 만들고
// 컴퓨터는 랜덤 가위 바위 보 중에 하나를 내고
// 플레이어는 선택할수 있게
// 
// 플레이어 컴퓨터
// 가위      가위 = 무승부
// 가위      바위 = 패
// 가위       보  = 승
// 바위      바위 = 무승부
// 바위      가위 = 승
// 바위       보  = 패
// 보         보  = 무승부
// 보        가위 = 패
// 보        바위 = 승
function App() {

  // 컴퓨터와 유저가 사용할 가위 바위 보의 객체를 하나 만들어주자
  // 선택 값을 담아 놓을 객체
  const scissors = "가위";
  const rock = "바위";
  const paper = "보";

  // 선택값을 다루고 있어
  // select객체 안에 데이터가 다 들어있으면
  // select 동작을 하는 프로그램을 작성할때 
  // select 객체안에 있는 값은 전부 select 동작을 하기위해 만든것이라고 알수있음

  // select 컴퓨터와 유저가 가위 바위 보를 냈을때 필요한 데이터들을 모아둘 객체
  const select = {
    scissors :{
      name : "가위",
      img : img01
    },
    rock : {
      name : "바위",
      img:img02
    },
    paper : {
      name : "보",
      img : img03
  }
  }

  // 유저가 선택한 데이터 값은 주시하자 선택하면 데이터 바뀐상태로 다시 그려줘야 하기 때문에 
  // 유저의 선택 useState
  const [userSelect, setUserSelect] = useState(null);
  // 컴퓨터의 선택 값을 담을 useState
  const [comSelect, setComSelect] = useState(null);
  // 승패 결과를 담을 useState
  const [result, setResult] = useState(null);

  function userClick(_select){
    // _select == "scissors"
    // select['scissors']
    // _select == "rock"
    // select["rock"]
    // 선택한 객체를 상태변수에 담아주자
    setUserSelect(select[_select]);

    // 컴퓨터는 랜덤으로 선택을 시켜야하는데 
    // 플레이어 선택 이후에 컴퓨터도 랜덤한 값을 가지고 가위 바위 보를 선택 시키자.
    let arr = Object.keys(select);
    // 객체의 키값만 뽑아서 배열로 반환 해준다.
    // Object.keys
    console.log(arr);
    // 소수점 제외시키고 랜덤한 정수값 0~2
    let comRandom = Math.floor(Math.random() * 3);

    // comRandom 랜덤한 값이고 0~2
    // arr = ['scissors', 'rock' , 'paper']
    // arr[comRandom] = 'scissors','rock','paper'
    setComSelect(select[arr[comRandom]]);

    let player = select[_select];
    let computer = select[arr[comRandom]];
    if(player.name === computer.name){
      // 처음에 무승부 거르고 
      setResult("무승부")
    }else if(player.name == "가위"){
      let result = computer.name == "보" ? "이겼음" : "졌다"
      setResult(result);
    }else if(player.name == "바위"){
      let result = computer.name == "가위" ? "이겼음" : "졌다"
      setResult(result);
    }
    else if(player.name == "보"){
      let result = computer.name == "바위" ? "이겼음" : "졌다"
      setResult(result);
    }
  }

  useEffect(()=>{
    console.log(userSelect);
  },[userSelect])

  return (
    <>
    <div className='App'>
    <Block data={userSelect} name={"유저"} result={result}/>
    <Block data={comSelect} name={"컴퓨터"} result={result}/>
    </div>
    <div>
      {/*버튼은 여기에*/}
      <button onClick={()=>{userClick("scissors")}}>가위</button>
      <button onClick={()=>{userClick("rock")}}>바위</button>
      <button onClick={()=>{userClick("paper")}}>보</button>
      
    </div>
    </>
  );
}

export default App;

 

 

---

function App() {
  const scissors = "가위";
  const rock = "바위";
  const paper = "보";

- 이 부분은 게임에서 사용되는 선택지를 나타내는 변수들 "가위","바위","보"

 

  const [userSelect, setUserSelect] = useState(null);
  const [comSelect, setComSelect] = useState(null);
  const [result, setResult] = useState(null);

- 이 부분은 상태 변수들을 정의하는 부분 userSelect은 유저의 선택 useState를 사용하여 초기값 null 설정

 

function userClick(_select){
    // _select == "scissors"
    // select['scissors']
    // _select == "rock"
    // select["rock"]
    // 선택한 객체를 상태변수에 담아주자
    setUserSelect(select[_select]);

    // 컴퓨터는 랜덤으로 선택을 시켜야하는데 
    // 플레이어 선택 이후에 컴퓨터도 랜덤한 값을 가지고 가위 바위 보를 선택 시키자.
    let arr = Object.keys(select);
    // 객체의 키값만 뽑아서 배열로 반환 해준다.
    // Object.keys
    console.log(arr);
    // 소수점 제외시키고 랜덤한 정수값 0~2
    let comRandom = Math.floor(Math.random() * 3);

    // comRandom 랜덤한 값이고 0~2
    // arr = ['scissors', 'rock' , 'paper']
    // arr[comRandom] = 'scissors','rock','paper'
    setComSelect(select[arr[comRandom]]);

    let player = select[_select];
    let computer = select[arr[comRandom]];
    if(player.name === computer.name){
      // 처음에 무승부 거르고 
      setResult("무승부")
    }else if(player.name == "가위"){
      let result = computer.name == "보" ? "이겼음" : "졌다"
      setResult(result);
    }else if(player.name == "바위"){
      let result = computer.name == "가위" ? "이겼음" : "졌다"
      setResult(result);
    }
    else if(player.name == "보"){
      let result = computer.name == "바위" ? "이겼음" : "졌다"
      setResult(result);
    }
  }

{/*버튼은 여기에*/}
      <button onClick={()=>{userClick("scissors")}}>가위</button>
      <button onClick={()=>{userClick("rock")}}>바위</button>
      <button onClick={()=>{userClick("paper")}}>보</button>

- select는 함수 userClick의 매개변수로 전달되는 값.

이 함수는 사용자가 선택한 가위,바위,보를 나타내는 값을 _select로 받아와서 처리하는 역할

 

select[_select]는 'select'객체에서 _select 변수에 저장된 값을 키로 사용하여 해당하는 객체를 선택

즉 select[_select]는 사용자가 선택한 가위,바위,보에 해당

 

 

import {useState,useEffect} from "react"

const [userSelect, setUserSelect] = useState(null);

useEffect(()=>{
    console.log(userSelect);
  },[userSelect])

- 이 부분은 userSelect의 변경을 감지하고 변경발생마다 콘솔에 userSelect의 값을 출력한다.

 

 

let arr = Object.keys(select);

- 객체의 키값만 뽑아서 배열로 변환해주는데 "가위","바위","보" 이렇게만

 

 

 

 

const [comSelect, setComSelect] = useState(null);

setComSelect(select[arr[comRandom]]);

- 컴퓨터의 상태값을 상태변수인 comSelect에 저장하는 역할(setComSelect를 통해)

arr 배열에는 ["scissors","rock","paper"]와 같은 요소들이 있고 

comRandom은 0부터2까지 랜덤 

// arr[comRandom] = 'scissors','rock','paper'

 

따라서 select[arr[comRandom]]은 select 객체에서 랜덤하게 선택된 가위 바위 보에 해당하는 객체 반환

 

 

import React from 'react'


const Block = ({data,name,result}) => {
  let temp = "";
  if(name == "유저"){
    temp = result;
  }else{
    // result == "무승부"면 문제가 없어 애는 놔둬도 상관없고
    // result == "이겼다"면 반대로 졌다를 보여줘야 하고
    // result == "졌다"면 반대로 이겼다를 보여줘야한다.
    temp = result === "무승부" ? "무승부" : result === "이겼음" ? "졌다" : "이겼음"
  }
  return (
    <div className='block'>
        <div>{name}</div>
        {/* react에서 이미지 import 해오는 방법*/}
        {/* 리액트에서 가장 많이 사용하는 조건부 렌더링 값이 있으면 값을 사용해라라는 구문*/}
        {/* 값이 없으면 페이지가 터지기 때문에 */}
        <img src={data && data.img} alt="" />
        <div>{temp}</div>
    </div>
  )
}

export default Block

import img01 from "./가위.jpg";
import img02 from "./바위.jpg";
import img03 from "./보.jpg"

// 다수 내보낼때

export{img01,img02,img03};

import {useState,useEffect} from "react"
import Block from './components/Block'
import './App.css';
import { img01,img02,img03} from "./img"
// 추억의 자바스크립트
// 가위바위보
// 플레이어 하나 컴퓨터 하나
// 컴포넌트로 만들고
// 컴퓨터는 랜덤 가위 바위 보 중에 하나를 내고
// 플레이어는 선택할수 있게
// 
// 플레이어 컴퓨터
// 가위      가위 = 무승부
// 가위      바위 = 패
// 가위       보  = 승
// 바위      바위 = 무승부
// 바위      가위 = 승
// 바위       보  = 패
// 보         보  = 무승부
// 보        가위 = 패
// 보        바위 = 승
function App() {

  // 컴퓨터와 유저가 사용할 가위 바위 보의 객체를 하나 만들어주자
  // 선택 값을 담아 놓을 객체
  const scissors = "가위";
  const rock = "바위";
  const paper = "보";

  // 선택값을 다루고 있어
  // select객체 안에 데이터가 다 들어있으면
  // select 동작을 하는 프로그램을 작성할때 
  // select 객체안에 있는 값은 전부 select 동작을 하기위해 만든것이라고 알수있음

  // select 컴퓨터와 유저가 가위 바위 보를 냈을때 필요한 데이터들을 모아둘 객체
  const select = {
    scissors :{
      name : "가위",
      img : img01
    },
    rock : {
      name : "바위",
      img:img02
    },
    paper : {
      name : "보",
      img : img03
  }
  }

  // 유저가 선택한 데이터 값은 주시하자 선택하면 데이터 바뀐상태로 다시 그려줘야 하기 때문에 
  // 유저의 선택 useState
  const [userSelect, setUserSelect] = useState(null);
  // 컴퓨터의 선택 값을 담을 useState
  const [comSelect, setComSelect] = useState(null);
  // 승패 결과를 담을 useState
  const [result, setResult] = useState(null);

  function userClick(_select){
    // _select == "scissors"
    // select['scissors']
    // _select == "rock"
    // select["rock"]
    // 선택한 객체를 상태변수에 담아주자
    setUserSelect(select[_select]);

    // 컴퓨터는 랜덤으로 선택을 시켜야하는데 
    // 플레이어 선택 이후에 컴퓨터도 랜덤한 값을 가지고 가위 바위 보를 선택 시키자.
    let arr = Object.keys(select);
    // 객체의 키값만 뽑아서 배열로 반환 해준다.
    // Object.keys
    console.log(arr);
    // 소수점 제외시키고 랜덤한 정수값 0~2
    let comRandom = Math.floor(Math.random() * 3);

    // comRandom 랜덤한 값이고 0~2
    // arr = ['scissors', 'rock' , 'paper']
    // arr[comRandom] = 'scissors','rock','paper'
    setComSelect(select[arr[comRandom]]);

    let player = select[_select];
    let computer = select[arr[comRandom]];
    if(player.name === computer.name){
      // 처음에 무승부 거르고 
      setResult("무승부")
    }else if(player.name == "가위"){
      let result = computer.name == "보" ? "이겼음" : "졌다"
      setResult(result);
    }else if(player.name == "바위"){
      let result = computer.name == "가위" ? "이겼음" : "졌다"
      setResult(result);
    }
    else if(player.name == "보"){
      let result = computer.name == "바위" ? "이겼음" : "졌다"
      setResult(result);
    }
  }

  useEffect(()=>{
    console.log(userSelect);
  },[userSelect])

  return (
    <>
    <div className='App'>
    <Block data={userSelect} name={"유저"} result={result}/>
    <Block data={comSelect} name={"컴퓨터"} result={result}/>
    </div>
    <div>
      {/*버튼은 여기에*/}
      <button onClick={()=>{userClick("scissors")}}>가위</button>
      <button onClick={()=>{userClick("rock")}}>바위</button>
      <button onClick={()=>{userClick("paper")}}>보</button>
      
    </div>
    </>
  );
}

export default App;