✅ State
변수 선언과 같은 개념으로 생각하면 된다. 대신 처음에 초기화를 위해서
useState(1)를 사용해주어야 하고, state의 값을 바꾸기 위해서는setState를 통해서 값을 바꿔야한다. 보통App.js파일에서 시작하고,App.js에서HTML 태그에 props를 지정하면, 관련 태그js파일로 가서props를 기록해주어야 한다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>index.js
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));App.js
import Dice from './Dice';
import Button from './Button';
import { useState } from 'react';
function random(n){
return Math.ceil(Math.random() * n);
}
function App() {
const [num, setNum] = useState(1);
const handleRollClick = () => {
const nextNum = random(6);
setNum(nextNum);
}
const handleClearCilck = () => {
setNum(1);
}
return (
<div>
<div>
<Button onClick={handleRollClick}>던지기</Button>
<Button onClick={handleClearCilck}>처음부터</Button>
</div>
<Dice color="red" num={num} />
</div>
);
}
export default App;
App.js에서state의 개념을 사용중이라고 보면 된다.
Button.js
function Button({children, onClick}){
return <button onClick={onClick}>{children}</button>;
}
export default Button;
App.js에서 클릭 이벤트가 발생하였기 때문에onClick Props를Dice.js에 또 하나의 Props로 기재해 주어야 한다.
Dice.js
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';
const DICE_IMAGES = {
blue: [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
red: [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06],
};
// function Dice(props){
// const src = DICE_IMAGES[props.color][props.num - 1];
// const alt = `${props.color} ${props.num}`;
// return <img src={src} alt={alt} />;
// }
// 디스트럭쳐링 문법 사용 시,
function Dice({ color = 'blue', num = 1 }) {
const src = DICE_IMAGES[color][num - 1];
const alt = `${color} ${num}`;
return <img src={src} alt={alt} />;
}
export default Dice;결과물은?
필요하다면 공부하는 개발자, 한승준