<1-11까지 강의에서 진행한 내용 정리>
여기까지 Gugudan.html 내용을 화면에 띄우면
(랜덤 숫자)
정답일 때,
딩동댕~ 14를 맞춘 당신은!!! 천. 재!!!
오답일 때,
삐-삑 다시 생각해보라 오버 (-,,-)
<html>
<head>
<meta charset="UTF-8" />
<title>구구단</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- development 개발용 -->
<!-- production 배포용 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel"> // 결과: <div id="root"><button>Like</button></div>
class Gugudan extends React.Component {
state = {
frist: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
//value: '', 의 뜻: 입력하고 버튼을 눌렀을때 입력창이 빈칸으로 된다
result: '',
};
onSubmit = (e) => {
e.preventDefault();
if (parseInt(this.state.value) === this.state.frist * this.state.second) {
this.setState((prevState) => {
return {
result: '딩동댕~ ' + prevState.value + '를 맞춘 당신은!!! 천.재!!!',
frist: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
};
});
} else {
this.setState({
result: '삐-삑 다시 생각해보라 오바 (-,,-)',
value: '',
// 빈칸으로 바뀌는거랑 정답인지 아닌지의 글자만 바뀌게 한다.
});
}
};
//긴 함수식을 따로 뺐을 때는 function 아니고 화살표함수로 무조건쓰기.
onChange = (e) => {
this.setState({ value: e.target.value });
};
//긴 함수식을 따로 뺐을 때는 function 아니고 화살표함수로 무조건쓰기.
input;
//이거와 62줄의 ref={(c) => {this.input = c;}는 포커스가 안풀리게하는 역할.
onRefInput = (c) => {this.input = c; };
//컨텐츠
render() {
return ((((((((((((((
<React.Fragment>
<div>{this.state.frist} 곱하기{this.state.second}는?</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
<button type="submit">입력!</button>
</form>
<div>{this.state.result}</div>
</React.Fragment>
))))))))))))));
//이렇게 ()괄호를 많이 줘도 돌아감. 중요한거는 이렇게 하면 알기 쉬울듯
}
}
// render 변할것들에는 state 넣어준다.
//render는 화살표함수 쓸 필요없다
</script>
<script type="text/babel">
ReactDOM.render(<Gugudan />, document.querySelector('#root'));
</script>
</body>
</html>
'끄적끄적' 카테고리의 다른 글
| 오늘의 일본어 : 좋아하는 냄새, 물건, 사람, 장소를 찾는게 꿈을 찾는 첫걸음 (0) | 2022.07.02 |
|---|---|
| [React] 제로초님 리액트 기본강좌 2-1 정리 Class 와 React hooks의 차이 (0) | 2022.07.02 |
| [React] 제로초님 리액트 기본강좌 1-6까지 정리 (0) | 2022.07.02 |
| 오늘의 일본어 : 당신의 강점은 당신의 약점에서 만들어진다. (0) | 2022.06.30 |
| 오늘의 일본어 : 하고 싶은 일을 찾는 방법 (0) | 2022.06.28 |
댓글