✅ {변수명} 중괄호 기능 사용하기

import { Fragment } from "react";
import ReactDOM from "react-dom";

const product = 'MacBook';
const model = 'Air';
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick(e) {
  alert('곧 도착합니다!');
}

ReactDOM.render(
  <Fragment>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진"/>
    <button onClick = {handleClick}>확인!</button>
  </Fragment>,
  document.getElementById("root")
);

{변수명}은 텍스트는 물론, 속성과 이벤트의 함수로도 사용가능

중괄호 안에서 for, if문 등의 문장은 다룰 수 없다는 점은 꼭 기억해 주세요.

☑️ 가위바위보 프로젝트 진행 2

import ReactDOM from 'react-dom';

const WINS = {
 rock: 'scissor',
 scissors: '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';
  
ReactDOM.render(
 <>
 	<h1>가위바위보</h1>
  	<h2>{getResult(me, other)}</h2>
    <button onClick={handleClick}>가위</button>
    <button onClick={handleClick}>바위</button>
    <button onClick={handleClick}>보</button>
 </>,
 document.getElementById('root')
)