본문 바로가기

React

[React] 가위바위보(간단버전 2)

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const WINS = {
  rock: 'scissor',
  scissor: 'papaer',
  paper: 'rock',
};

function getResult(left, right) {
  if (WINS[left] === right) return '승리';
  else if (left === WINS[right]) return '패배';
  else return '무승부';
}

function handleClick() {
  console.log('가위바위보!');
};

const me = 'rock';
const other = 'scissor';

root.render(
  <>
    <h1>가위바위보</h1>
    <h2>{getResult(me, other)}</h2>
    <button onClick={handleClick}>가위</button>
    <button onClick={handleClick}>바위</button>
    <button onClick={handleClick}>보</button>
  </>
);

'React' 카테고리의 다른 글

[React] Props  (0) 2023.03.17
[React] component/ element  (0) 2023.03.17
[React] JSX 에서 JavaScript 사용하기  (0) 2023.03.16
[React] Fragment 태그  (0) 2023.03.16
[React] JSX  (0) 2023.03.16