리액트 가위바위보

결과물

1. 유저는 가위바위보 중에 선택, 컴퓨터는 랜덤으로, 왼쪽 하단 결과값 표시

---

2. 이미지 import, export 방법

---

src안에 img라는 폴더를 만들고 이미지를 넣고 index.js에 각각의 이미지파일을 import 하고 묶어서 export 한다. 그리고 다른 파일에서
-> import {img01,img02,img03} from "./img/index.js" 으로 사용하면 된다.

---

3. App.js에서 가위바위보 버튼을 누렀을 때 결과값들을 Block에 넘겨주기

import { useEffect,useState} from 'react';
import './App.css';
import Block from "./components/Block"
import { img01,img02,img03 } from './img';

function App() {

  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("");

  function userClick(_select){
    
    //선택한 객체를 상태변수에 담아주자
    // ⭐⭐⭐_select를 문자열로 받았기때문에 select._select 가 아닌 select[_select]로 객체의 안에 값을 찾아줘야한다.
    setUserSelect(select[_select]);

    // select 객체의 키값만 가져와서 arr에 저장
    let arr = Object.keys(select);
    console.log(arr); // (3) ['scissors', 'rock', 'paper']
  
    let ComRandom = Math.floor(Math.random() * 3);

    setComSelect(select[arr[ComRandom]]);

    let player = select[_select]
    // let player = userSelect -> 리액트의 상태업데이트는 비동기때문에 set 직후에는 업데이트 값이 적용이 안된다.

    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;

⭐⭐⭐
1) button onClick을 보면 onClick={userClick("scissors")}가 아닌
onClick={()=>{
userClick("scissors")
}} 로 코드를 구현했다. 그 이유는 첫번째 방법은 렌더링될 때 바로 함수가 즉시 실행되기 때문이다. 하지만 아래코드는 렌더링 시에 실행되는게 아닌 클릭시에만 실행된다.
⭐⭐⭐
2) 객체의 키값을 불러올 때
const select ={
scissors : {
name : "가위",
img : img01
}
}일 때, scissors의 값을 불러오고 싶을 때 select.scissors로 불러온다.
하지만 본문코드에선 버튼 클릭시 "scissors"인 문자열로 값을 넘겼기에 키가 문자열이다. 그럴경우에는 select["scissors"] 처럼 대괄호 안에 넣어 불러와야한다.

---

4.App.js에서 <Block data={userSelect} name={"유저"} result={result}/>
<Block data={comSelect} name={"컴퓨터"} result={result}/> 으로
값을 넘겨줬으니 Block.jsx 에서 어떻게 처리하는지 확인해보자.

⭐⭐⭐
1) <img src={data && data.img} alt="" /> 라는 구문은 react에서 이미지를 import 할 때 많이 사용되는 방법이라고 한다. 만약 data.img만 하게된다면 초기화면상태, 동작을 하기전엔 data의 값이 없으니 페이지가 터진다.
그렇기때문에 앞에 data 를 추가하여 값이 있는지 없는지 먼저 판단하여 data가 없으면 뒤에 data.img는 실행되지 않기때문에 이미지는 그냥 빈 이미지가 나오게된다.

---