๊ฐ์ ๋ฐ์ ๋ณด ๊ฒ์ ๋ง๋๋ ๊ณผ์ ์ ๋ค๋ฃจ์ด๋ณด์๋ค.
์ฒ์: ๊ฐ๋จํ๊ฒ ํ์ดํ ์ด๋ฆ๊ณผ , ๋ฒํผ์ ๋ง๋ค์๋ค.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>๊ฐ์๋ฐ์๋ณด</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
JSX
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
<h1 id="title">๊ฐ์๋ฐ์๋ณด</h1>
<button class="hand">๊ฐ์</button>
<button class="hand">๋ฐ์</button>
<button class="hand">๋ณด</button>
</div>
, document.getElementById('root'));๊ฒฐ๊ณผ
HTML ์ ์์ ๋์ผ
JSX
import ReactDOM from 'react-dom';
const WINS = {
rock: 'scissor',
scissor: 'paper',
paper: 'rock',
};
function getResult(left, right) {
if (WINS[left] === right) return '์น๋ฆฌ';
else if (left === WINS[right]) return 'ํจ๋ฐฐ';
return '๋ฌด์น๋ถ';
}
function handleClick() {
console.log('๊ฐ์๋ฐ์๋ณด!');
}
const me = 'rock';
const other = 'scissor';
const result = getResult(me, other);
ReactDOM.render(
<>
<h1>๊ฐ์๋ฐ์๋ณด</h1>
<h2>{result}</h2>
<button onClick={handleClick}>๊ฐ์</button>
<button onClick={handleClick}>๋ฐ์</button>
<button onClick={handleClick}>๋ณด</button>
</>,
document.getElementById('root')
);๋ด๊ฐ ์ฃผ๋จน์ ๋์ ๊ฒฝ์ฐ
์๋๊ฐ ๊ฐ์๋ฅผ ๋์ ๊ฒฝ์ฐ ๋ฅผ ๋ง๋ค์ด์
๊ทธ ๊ฒฐ๊ณผ ๊ฐ์ ์ถ๋ ฅ๋๋๋ก ์์ ํ๋ค.
