728x90
과제내용
로또번호 추첨기 제작
- 예쁘게 만들기
- this.state 사용
- props 속성 값 관리
- 컴포넌트 최소 단위까지 쪼개보기
결과물
- App 컴포넌트
- 페이지의 전체 그림을 render 한다.
- LottoSet 컴포넌트를 render 한다.
- LottoSet 컴포넌트
- 로또 추첨 기능을 하는 컴포넌트이다.
- 로또 추첨 결과를 가져와야 하므로, 추첨결과의 데이터를 가지고 있어 그리는 역할을 하는 컴포넌트들의 부모 컴포넌트로 설정했다.
- 로또 추첨을 동작하는 함수를 실행하기 위해 button 태그를 클릭하면 함수를 실행할 수 있도록 설정하였다.
- LottoDiv 컴포넌트를 render하고, 버튼을 눌러 추첨받은 번호 6개를 배열의 형태로 "lottonum" 객체에 담아 보낸다.
- LottoList 컴포넌트 render하고, 추첨받은 결과인 배열을 계속 담아주는 데이터를 이중배열의 형태로 "lottoList" 객체에 담아 보낸다.
- LottoList 컴포넌트
- 지난 로또 결과를 그려주는 컴포넌트이다.
- 결과값들이 이중배열로 담겨있어, map함수로 돌면서 각 결과값들이 담인 배열을 LottoDiv로 보내화면에 그려준다.
- LottoDiv 컴포넌트
- 현재 추첨된 로또 번호 6개를 그려주는 컴포넌트이다.
- 추첨된 로또 번호 6개를 담은 배열이 담겨있어, map 함수로 추첨 번호를 돌면서 LottoNum으로 값을 보내 화면에 그려준다.
- LottoNum 컴포넌트
- 추첨된 각 로또 번호를 그려주는 컴포넌트이다.
- 각 추첨번호를 render로 그려준다.
- 추첨번호의 값에 따라 공의 색이 다르게 그려진다.
- 0 ~ 10 : Yellow
- 11 ~ 20 : Blue
- 21 ~ 30 : Red
- 31 ~ 40 : Black
- 41 ~ 45 : Green
<body>
<div id="root"></div>
</body>
<script type="text/babel">
// 로또 숫자 랜덤뽑기 세팅을 하는 컴포넌트
class LottoSet extends React.Component {
constructor(props) {
super(props);
this.state = {
num: [],
numArr: [],
};
this.choice = this.choice.bind(this);
console.log("뜨라고");
}
choice() {
console.log("실햄댐");
let numArr = [];
for (let a = 1; a <= 45; a++) {
numArr.push(a);
}
let num2 = [];
for (let i = 0; i < 6; i++) {
let randomIndex = Math.floor(Math.random() * numArr.length);
let number = numArr[randomIndex];
numArr.splice(randomIndex, 1);
num2.push(number);
}
num2.sort((a, b) => {
return a - b;
});
this.setState({ num: num2, numArr: [num2, ...this.state.numArr] });
}
render() {
return (
<>
<button className="LottoBtn" onClick={this.choice}>
추첨
</button>
<LottoDiv lottonum={this.state.num} />
<LottoList List={this.state.numArr} />
</>
);
}
}
// class LottoItem extends React.Component {
// constructor(props) {
// super(props);
// }
// render() {
// return (
// <ul>
// <li>{this.props.num}</li>
// </ul>
// );
// }
// }
// 지난 로또 결과를 그려주는 컴포넌트
class LottoList extends React.Component {
constructor(props) {
super(props);
}
loop(value, index) {
return <LottoDiv key={index} lottonum={value} />;
}
render() {
return <li>{this.props.List.map(this.loop)}</li>;
}
}
// 로또번호 하나를 그려주는 컴포넌트
class LottoNum extends React.Component {
constructor(props) {
super(props);
}
// ClassName(){
// let Cname = "Num" + {this.props.index}
// }
render() {
let Color = "";
if (this.props.num < 11) {
Color = "Yel";
} else if (this.props.num > 10 && this.props.num < 21) {
Color = "Blue";
} else if (this.props.num > 20 && this.props.num < 31) {
Color = "Red";
} else if (this.props.num > 30 && this.props.num < 41) {
Color = "Black";
} else if (this.props.num > 40 && this.props.num < 46) {
Color = "Green";
}
const className = "Num" + this.props.yuslshi + " " + Color;
return (
<div className={className}>
<div className="inner">{this.props.num}</div>
</div>
);
}
}
// 로또번호 전체를 그려주는 컴포넌트
class LottoDiv extends React.Component {
constructor(props) {
super(props);
}
loop(value, index) {
return <LottoNum yuslshi={index} num={value} />;
}
render() {
return (
<div className="LottoNum">{this.props.lottonum.map(this.loop)}</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log("뜸?");
return (
<div>
<LottoSet />
</div>
);
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
728x90
'블록체인_9기 > 과제' 카테고리의 다른 글
| 47강_220705_React(지뢰찾기 제작) (1) | 2023.07.05 |
|---|---|
| 46강_220704_React(캘린더 제작) (0) | 2023.07.04 |
| 36강_220523_Node.js(게시판 페이지 만들기 총 복습) (0) | 2023.05.30 |
| 35강_230522_Node.js(회원가입, 로그인 기능이 있는 게시판 페이지 구현) (0) | 2023.05.29 |
| 19강_230328_과제_묵찌빠 배팅게임_renewal (0) | 2023.03.30 |
