React๋ก ๊ตฌํํ ๊ฐ์๋ฐ์๋ณด ๊ฒ์์ด๋ค.
Let's play
๋ฒํผ์ ๋๋ฌ ๊ฒ์์ ์์ํ๋ค.๊ฐ์, ๋ฐ์, ๋ณด
์ค์ ํ๋๋ฅผ ์ ํํ๋ฉด ๊ฐ์, ๋ฐ์, ๋ณด
์ค์ ํ๋๋ฅผ ๋ํ๋ธ๋ค. ๋
น์
์ผ๋ก ์ก๋ค๋ฉด ๋นจ๊ฐ์
๋น๊ฒผ๋ค๋ฉด ๋ณด๋ผ์
์ผ๋ก ๋ณ๊ฒฝ๋๋ค.<button className='playBtn' onClick={() => show()}>Let's play??</button>
.playBtn{
width: 150px;
height: 50px;
border: 3px solid white;
border-radius: 20px;
background: none;
margin-top: 50px;
cursor: pointer;
color: white;
font-size: 20px;
position: relative;
z-index: 1;
}
.playBtn:hover{
color: black;
background-color: white;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.playBtn:after {
content: "";
border-radius: 20px;
width: 0%;
height: 100%;
top: 0;
position: absolute;
left: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
background: #ffffff;
}
.playBtn:hover:after {
width: 100%;
z-index: -1;
}
const show = () => {
let bg = document.querySelector(".backGround");
bg.classList.add("active")
};
<button className='playBtn' onClick={() => show()}>Let's play??</button>
.active{
transform: scale(0);
transition: 1s;
}
Les's play
๋ฒํผ์ ๋๋ฅด๋ฉด active
๋ผ๋ ํด๋์ค๊ฐ ์ถ๊ฐ ๋๊ฒ ๋ง๋ค์๋ค.
active
๋ transform
์ scale
์ 0์ผ๋ก ์ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ transition
์ผ๋ก ์๊ฐ 1s
์ ์คฌ๋ค.
const choice = {
rock: {
name: "Rock",
img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpSJwo%2FbtqXJV1lACE%2Fnx5XrxkCLWXh9UsnoS8vbK%2Fimg.png"
},
paper: {
name: "Paper",
img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmjB2s%2FbtqXHhp6kpG%2FTH14W4U612SxKo9uuR2sB0%2Fimg.png"
},
scissors: {
name: "Scissors",
img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHfURw%2FbtqXKvOTNWK%2FgWTwPXEg9QzSV0ilOuwuak%2Fimg.png"
}
}
๋จผ์ ๊ฐ์, ๋ฐ์, ๋ณด์ ๋ํ ๊ฐ์ฒด์ ๋ง๋ ๋ค.
<div className='btn-style'>
<button onClick={() => play("scissors")}><FontAwesomeIcon icon={faHandScissors} className="font" /></button>
<button onClick={() => play("rock")}><FontAwesomeIcon icon={faHandBackFist} className="font" /></button>
<button onClick={() => play("paper")}><FontAwesomeIcon icon={faHand} className="font" /></button>
</div>
๋ฒํผ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด play()
ํจ์๋ฅผ ์ฝ๋ฐฑํ๋ค, ()=>
์ด๊ฒ์ด ์ฝ๋ฐฑํ๋ ๊ฒ์ด๋ค. ์ฝ๋ฐฑํ๋ฉด์ play()
ํจ์ ์์ ์๋ ๋ด์ฉ๋ ๊ฐ์ด ์ฝ๋ฐฑํ๋ค.
const play = (userChoice) => {
};
play()
ํจ์์์ ์๋ ๋ด์ฉ์ userChoice
๋ผ๋ ๋งค๊ฐ๋ณ์๋ก ๋ฐ๋๋ค.
console.log(userChoice)
๋ฅผ ์ถ๋ ฅํ๋ฉด ๋ฒํผ์ ๋๋ฅด๋ฉด play("๋ด์ฉ")
ํจ์ ์์ ์๋ ๋ด์ฉ์ด userChoice
๋งค๊ฐ๋ณ์์ ์ ์ฅ๋๋ค.
์ด์ play()
๋ฒํผ์ ๋๋ ์ ๋ ์ฌ์ฉ์๊ฐ ์ ํํ ๊ฐ์, ๋ฐ์, ๋ณด ์ด๋ฏธ์ง๊ฐ ๋์์ผ ํ๋ค. ์ฌ๊ธฐ์ ๋ถํฐ state
๋ฅผ ์์ฑํ๋ค.
const [userSelect, setuserSelect] = useState(null);
const play = (userChoice) => {
setuserSelect(choice[usserChoice]);
};
setuserSelect(choice[usserChoice]);
์ setuserSelect
๋ ๋ณ๊ฒฝํ ๋ด์ฉ์ ์
๋ ฅ ํด์ฃผ๋ ๊ฒ์ด๋ค. choice
๋ผ๋ ๋ฐฐ์ด์ userChoice
๋ผ๋ ๋งค๊ฐ๋ณ์์ ์ ์ฅ๋ ๊ฐ์ ์ธ๋ฑ์ค๊ฐ์ผ๋ก ํ ๋น ํด์ฃผ๋ ๊ฒ์ด๋ค. ๊ฐ์ ๋ฒํผ์ ์ ํํ๋ฉด Scissors๋ผ๋ ๊ฐ์ฒด๊ฐ setuserSelect
์ ์ ์ฅ๋ ๊ฒ์ด๋ค. ๊ทธ๋ผ ์ด ์ ์ฅ๋ ๊ฐ์ ์จ์ผํ๋ค.
return (
<div className='container'>
<div className='wrap'>
<Box name="You" item={userSelect}/>
<Box name="Computer"/>
</div>
</div>
);
item={userSelect}
Box ์ปดํฌ๋ํธ์ item ์ด๋ผ๋ ์์ฑ ๊ฐ์ userSelect
๋ก ์ง์ ํด์ฃผ๋ ๊ฒ์ด๋ค.
โ ์ ์ฝ๋๋ฅผ ์คํํ๋ค๋ฉด ์๋ฌ๊ฐ ๋ฐ ๊ฒ์ด๋ค.
์ด ์๋ฌ๊ฐ ๋ฌ ์ด์ ๋ ์ ์ฝ๋๋ฅผ ๋ณด๋ฉด
"You"
๋ผ๋ ๋ฐ์ค์๋item
์์ฑ์ด ์ ์ ๋์ด ์๋๋ฐ"computer"
์๋item
์์ฑ์ด ์ง์ ๋์ง ์์๋ค. ๊ทธ๋์ Box์ปดํฌ๋ํธ๋"You"
๋ฅผ ๊ทธ๋ฆด ๋๋ ๋ฌธ์ ๊ฐ ๋์ง ์์ง๋ง"computer"
๋ฅผ ๊ทธ๋ฆด ๋๋ ๋ฌธ์ ๊ฐ ๋๋ ๊ฒ์ด๋ค.๊ทธ๋ฌํ ์ด์ ๋ก ์ ์
"computer"
๋ฐ์ค๋ ์ฃผ์์ ๋ฌ์์ผ ํ๋ค.
item={userSelect}
์์ฑ์ ์ง์ ํ๋ค๋ฉด Box.js
๋ก ๋์ด๊ฐ๋ค.
import React from 'react'
const box = (props) => {
return (
<div className=box>
<h1>{props.name}</h1>
<img src={props.item && props.item.img} alt="" />
<p>{result}</p>
</div>
)
}
export default box
์ด๋ฏธ์ง ๊ฐ์ props
๋ฅผ ์ฌ์ฉํด ํ ๋น ํด์ค ๊ฒ์ด๋ค. ๊ทผ๋ฐ ์ img
ํ ๋น ํ ๋ <img src={props.item && props.item.img} alt="" />
๋ค๋ฅธ ์ฝ๋์ ๋ค๋ฅธ๊ฐ?
๊ทธ ์ด์ ๋ <img src={props.item.img} alt="" />
์ด๋ ๊ฒ๋ง ์ฐ๋ฉด ๋ง์ฐฌ๊ฐ์ง๋ก ์๋ฌ๊ฐ ๋ฌ๋ค.
์๋ฌ๊ฐ ๋ฌ ์ด์ ๋ ์ state์์ const [userSelect, setuserSelect] = useState(null);
์ null
๊ฐ์ ์ค ๊ฒ์ด๋ค. ๊ทธ๋ผ ์ปดํจํฐ ์
์ฅ์์ null
์ ๋ฐ์ UI๋ฅผ ๊ทธ๋ฆด ์ ์๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ๋ ๊ฒ์ด๋ค.
<img src={props.item && props.item.img} alt="" />
props.item
์ ๊ฐ์ด ์์ ๋(null ์ด ์๋ ๋)๋ง, props.item.img
๊ฐ์ ๋ณด์ฌ์ค๋ค.
const randomChoice = () => {
let itemArray = Object.keys(choice);
let randomitem = Math.floor(Math.random() * itemArray.length);
let final = itemArray[randomitem];
return choice[final];
};
๋๊ฐ์ด ์์ ๋ฐฐ์ด์ด ๋ง๋ค์ด์ ธ ์๋ ์ํ๋ก ์์ํ๋ค. ์ปดํจํฐ๊ฐ ๋๋ค์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ ํํด UI์ ์ถ๋ ฅํด์ผ ํ๋ค. ์ผ๋จ ๋จผ์ randomChoice
ํจ์๋ฅผ ๋จผ์ ๋ง๋ ๋ค.
let itemArray = Object.keys(choice);
itemArray
๋ผ๋ ๋ณ์์ choice
๊ฐ์ฒด๋ฅผ ๋ฐฐ์ด๋ก ๋ง๋ค์ด์ฃผ๋ ๊ฒ์ด๋ค.
let randomitem = Math.floor(Math.random() * itemArray.length);
randomitem
์ด๋ผ๋ ๋ณ์์ Math.random()
๋ผ๋ ํจ์์ itemArray
๋ฐฐ์ด์ ๊ธธ์ด๋งํผ ๊ณฑํ๊ณ Math.floor()
๋ด์ฅํจ์๋ฅผ ์จ์ ๋ค์ ์์ซ์ ์ ๋ค ์์ ํ ๋นํ๋ค.
let final = itemArray[randomitem];
final
์ด๋ผ๋ ๋ณ์์ itemArray
๋ณ์์ randomitem
๋ณ์์ ์ ์ฅ๋ ์ธ๋ฑ์ค ๊ฐ์ ํ ๋นํ๋ค.
์ด๊ฒ์ return choice[final];
returnํด choice
๊ฐ์ฒด ๊ฐ์ ๋ฃ๋ ๊ฒ์ด๋ค.
randomChoice()
ํจ์๋ฅผ ๋ค ์์ฑํ์๋ค๋ฉด play()
๋ฒํผ์ ํจ์๋ฅผ ์จ์ผํ๋ค.
const [computerSelect, setcomputerSelect] = useState(null);
const play = (userChoice) => {
setuserSelect(choice[userChoice]);
let computerChoice = randomChoice();
setcomputerSelect(computerChoice);
};
computerChoice
๋ผ๋ ๋ณ์์ randomChoice()
ํจ์๋ฅผ ํ ๋นํ๊ณ setcomputerSelect
์ computerChoice
๋ฅผ ์ง์ ํ๊ณ ์๊น ์ฃผ์์ ํ๋ "Computer"
์ปดํฌ๋ํธ ๋ฐ์ค์๋ item
๊ฐ์ ์ค์ ํ๋ค.
return (
<div className='container'>
<div className='wrap'>
<Box name="You" item={userSelect}/>
<Box name="Computer" item={computerSelect}/>
</div>
</div>
);
const [result, setResult] = useState("");
const play = (userChoice) => {
setuserSelect(choice[userChoice]);
let computerChoice = randomChoice();
setcomputerSelect(computerChoice);
setResult(randomPic(choice[userChoice], computerChoice));
};
const randomPic = (user, computer) => {
if (user.name === computer.name) {
return "Tie"
} else if (user.name === "Rock") return computer.name === "Scissors" ? "Win" : "Lose";
else if (user.name === "Scissors") return computer.name === "Paper" ? "Win" : "Lose";
else if (user.name === "Paper") return computer.name === "Rock" ? "Win" : "Lose";
};
์นํจ๋ฅผ ๊ฐ๋ฆฌ๊ธฐ ์ํด randomPic
์ด๋ผ๋ ํจ์๋ฅผ ๋ง๋ ๋ค. ๊ทธ๋ฆฌ๊ณ const [result, setResult] = useState("");
state๋ฅผ ์ง์ ํ๊ณ setResult(randomPic(choice[userChoice], computerChoice));
randomPic(์ ์ ๊ฐ, ์ปดํจํฐ ์ ํ ๊ฐ)
์ ์ ๋ฌํ๋ค.
์ ๋ฌ ๋ ๊ฐ์ const randomPic = (user, computer)
๋งค๊ฐ๋ณ์๋ก ๋ฐ๊ณ if
๋ฌธ์ ์จ์ user.name
์ด computer.name
์ด ๊ฐ์ผ๋ฉด TIE
๋ฅผ ์ถ๋ ฅํ๊ณ ๊ฐ์ง ์๋ค๋ฉด if
๋ฌธ ์์ ๋ if
๋ฅผ ์ด๋ค. ์ผํญ ์ฐ์ฐ์์ ์ด ๊ฒ์ด๋ค.
๋ฌด์จ ๋ง์ด๋๋ฉด user.name
๊ณผ computer.name
์ด ๊ฐ์ง ์์?? ๊ฐ์ง ์๋ค๋ฉด user.name
์ด Rock
๊ณผ ๊ฐ์?? ๊ฐ๋ค๋ฉด computer.name
์ด Scissors
์ ๊ฐ์?? ๊ฐ๋ค๋ฉด Win
์ ์ถ๋ ฅํ๊ณ ๊ฐ์ง ์๋ค๋ฉด Lose
๋ฅผ ์ถ๋ ฅํด! ์ด๋ป์ด๋ค.
ํจ์๋ฅผ ์ค์ ์ ๋คํ๋ค๋ฉด play()
ํจ์๋ฅผ ์คํํ ๋ ๋ ๊ฐ์ด ์ ๋ฌ๋์ด์ผ ํ๋ค.
return (
<div className='container'>
<div className='wrap'>
<Box name="You" item={userSelect} result={result}/>
<Box name="Computer" item={computerSelect} result={result}/>
</div>
</div>
);
Box์ปดํฌ๋ํธ์ result={result}
๊ฐ์ ๋ฃ์ด์ฃผ๊ณ box.js
์๋ result
๊ฐ์ ๋ฃ์ด์ค๋ค.
return (
<div className={`box ${result}`}>
<h1>{props.name}</h1>
<img src={props.item && props.item.img} alt="" />
<p>{props.result}</p>
</div>
);
โ ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฌธ์ ๊ฐ ์๊ธด๋ค.
reuslt
๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๊ฒฐ๊ณผ๋ ๋์ค๊ฒ ์ง๋งuser
์computer
๊ฐ ๋์์ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์ฌ ๊ฒ์ด๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๊ฒ์ ํด๊ฒฐํด์ฃผ๊ธฐ ์ํด ๋if
๋ฌธ์ ์จ์ผํ๋ค.let result; if(props.name === "Computer" && props.result !== "Tie" && props.result !== "" ){ result=props.result === "Win"? "Lose":"Win"; } else { result=props.result; } return ( <div className={`box ${result}`}> <h1>{props.name}</h1> <img src={props.item && props.item.img} alt="" /> <p>{result}</p> </div> )
result
๋ผ๋ ๋ณ์๋ฅผ ์ง์ ํด์ฃผ๊ณprops.name
์ดcomputer
์ ๊ฐ๊ฑฐ๋props.result
๊ฐTie
๊ฐ ์๋๊ฑฐ๋ ๋น์ด์์ ๋props.result
๊ฐwin
์ด๋ ๊ฐ์?
๊ฐ๋ค๋ฉดLose
๋ฅผ ์ถ๋ ฅํด์ฃผ๊ณ ๊ฐ์ง์๋ค๋ฉดWin
์ ์ถ๋ ฅํด์ค!!๊ทผ๋ฐ ์ ์กฐ๊ฑด๊ณผ ๋ง์ง ์๋ค๋ฉด ๊ทธ๋ฅ
props.result;
๋ฅผ ์ถ๋ ฅํด์ค์์ฑํ
if
๋ฌธ์result
๋ณ์์ ๋ด๊ณ<p>{result}</p>
์ result ๋ณ์๋ฅผ ์ ์ธํ๋ฉด ์ ์ ๊ฐ ์ด๊ธฐ๋ฉด ์ปดํจํฐ๋ ์ง๊ณ ์ ์ ๊ฐ ์ง๋ฉด ์ปดํจํฐ๊ฐ ์ด๊ธฐ๋ ๊ฒฐ๊ณผ๊ฐ ๋ํ๋๋ ๊ฒ์ด๋ค.
return (
<div className={`box ${result}`}>
<h1>{props.name}</h1>
<img src={props.item && props.item.img} alt="" />
<p>{result}</p>
</div>
)
Box์ปจํฌ๋ํธ์ className
์ ๋์ ์ธ result
๊ฐ์ผ๋ก ํด๋์ค๋ฅผ ์ง์ ํด์ฃผ๊ณ CSS๋ฅผ ์์ฑํด์ค๋ค.
.Win{
border: 10px solid green;
color : green;
transition: 1s;
}
.Lose{
border: 10px solid red;
color : red;
transition: 1s;
}
.Tie{
border: 10px solid purple;
color : purple;
transition: 1s;
}
๋ค์์๋ ๋ ์ฌํ์ ์ผ๋ก ๋ ธ๋ ฅํด์ ๋ง๋ค์ด์ผ์ง
์ฝ.. ํจ์ ใ ใ ๊ทผ๋ฐ ์ ๋ฐ gif ์์งค์ ์ง์ ์ฐพ์์ ์ฒจ๋ถํ์๋๊ฑด๊ฐ์? ใ ใ ใ ใ ํญ์ ์๊ฒจ์