구구단 리액트로 만들기 및 리액트 팁
직접 만든 함수들은 화살표 함수를 사용해야한다.
render안에서는 함수를 사용해도 상관없다.
구구단 만들기
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class GuGuDan extends React.Component {
constructor(props) { // react에서 기본적으로 사용하는것
super(props);
this.state = {
first: Math.ceil(Math.random() *9),
second: Math.ceil(Math.random() *9),
value: '',
result: '',
};
}
onSubmit = (e) => {
e.preventDefault();
if (parseInt(this.state.value) === this.state.first * this.state.second) {
// this.setState({
// result: '정답: ' + this.state.value,
// first: Math.ceil(Math.random() * 9),
// second: Math.ceil(Math.random() * 9),
// value: '',
// });
// setState는 비동기이다.
// 함수형 setState => 사용하면 이전상태값을 알 수 있어 유용하다. this.state가 안에 들어가면 쓰는걸로
// state가 변경될때 마다 render가 호출된다. 많이 변경 될 수록 안좋다. 느려짐
this.setState((prevState) =>{
return {
result: '정답: ' + prevState.value,
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
};
});
} else {
this.setState({
result: '땡',
value: '',
});
}
}
onChange = (e) => {
this.setState({value: e.target.value});
};
onRefinput = (c) => {
this.input = c;
};
render() {
return (
<React.Fragment>
<div>{this.state.first} 곱하기 {this.state.second} 는?</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
<button>입력!</button>
</form>
<div>{this.state.result}</div>
</React.Fragment>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root')); //화면에다가 위에서 만든 것을 실제로 반영하겠다. 렌더링 하겠다.
</script>
</body>
</html>
반응형
'패스트캠퍼스 > 자습' 카테고리의 다른 글
| 리액트 11~15강 정리 (0) | 2019.09.08 |
|---|---|
| poiemaweb 6~7강 정리 (0) | 2019.09.07 |
| poiemaweb 4~5강 정리 (0) | 2019.09.05 |
| 리액트 예습 1~5강 (0) | 2019.09.04 |
| poiemaweb복습 1~3강 (0) | 2019.09.03 |