[React] 리액트로 가위바위보 게임 구현 (Rock paper scissors)

가위바위보 게임 구현

// App.js //

import React, { useState } from 'react';
import './App.css';
import Title from './Title';
import RSPComponent from './RSPComponent';
import Result from './Result';


function App() {
  const RSP = ['바위', '가위', '보'];
  const [comChoice, setComChoice] = useState('');
  const [playerChoice, setPlayerChoice] = useState('');
  const [result, setResult] = useState('');

  const handleChoice = (choice) => {
    const com = parseInt(Math.random() * 3);
    const player = choice
    setPlayerChoice(RSP[player]);
    setComChoice(RSP[com]);
    if ((player-1+3) % 3 == com ) {setResult('졌습니다')}
    else if (player == com) {setResult('비겼습니다')}
    else {setResult('이겼습니다')}
  };

  return (
    <div className="App">
      <Title />
      <RSPComponent run={handleChoice}/>
      <Result comChoosen={comChoice} playerChoosen={playerChoice} result = {result} />
    </div>
  );
}

export default App;

// Title.jsx //

function Title() {
    return (
      <div className='title'>
        <h1>가위 바위 보 게임</h1>
      </div>
    );
  }

  export default Title;
  
  
  // RSPComponent.jsx //
  
import React, { useState } from 'react';
import './App.css';

function RSPComponent ({run}) {
    return (
        <div id="divV">
            <div className='rock'>
                <span onClick={() => run (0)}>
                    <img src="http://ggoreb.com/images/react/rock.png"/>
                </span>
            </div>
            <div className='scissor'>
                <span onClick={() => run (1)}>
                    <img src="http://ggoreb.com/images/react/scissors.png"/>
                </span>
            </div>
            <div className='paper'>
                <span onClick={() => run(2)}>
                    <img src="http://ggoreb.com/images/react/paper.png"/>
                </span>
            </div>
        </div>
    )
}

export default RSPComponent;

// Result.jsx //

import React, { useState } from 'react';

function Result({ comChoosen, playerChoosen, result }) {
    return (
      <div className='result'>
        <h1>Com : {comChoosen}</h1>
        <h1>Player : {playerChoosen}</h1>
        <h1>{result}</h1>
      </div>
    );
  }

  export default Result;