[React] 구구단 만들기
구구단 Component 만들기
참고) 겉보기에는 멀쩡한데 실행이 안됨 ㅠ_ㅠ 왜안될까?
<html>
<head>
<meta charset = "UTF-8"/>
<title> 구구단 </title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src = "http://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 실제 결과 : <div id="root"><button> Like </button></div> -->
<script type = "text/babel">
class GuGuDan extends React.Component{
constructor(props){
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 : "정답",
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});
};
render(){
return (
<div>
<div> {this.state.first} 곱하기 {this.state.second}는? </div>
<form onSubmit ={this.onSubmit}>
<input type = "number" value = {this.state.value} onChange = {this.onChange}/>
<button> 입력! </button>
</form>
<div>{this.state.result}</div>
</div>
);
}
}
</script>
<script type= "text/babel">
ReactDOM.render(<div><GuGuDan /></div>, document.querySelector('#root'));
</script>
</body>
</html>
<div> {} <> -> {}안에 javascript를 쓸 수 있음
this는 class의 this를 가리킨다.
나눠서 보기
cosntructor(props){
super(props);
this.state = {
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value : '',
result : '',
};
}this.state = {}; : 변할 것 같은것을 state로 만든다
this.onSubmit
- 직접 만들어준 함수들은 무조건 ()=> 화살표 함수를 써야 함
- 이때 function을 쓰면 안됨 ex) function (e) 이유? this가 달라지기 때문에
onSubmit = (e) => {
e.preventDefault();
if(parseInt(this.state.value) === this.state.first * this.state.second){
this.setState({
result : "정답",
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value : '',
});
}else{
this.setState({
result : "땡",
value : '',
});
}
}
this.onChange
onChange = (e) => {
this.setState({value : e.target.value});
};
마지막에 rendering을 해준다.
render(){
return (
<div>
<div> {this.state.first} 곱하기 {this.state.second}는? </div>
<form onSubmit = {this.onSubmit}>
<input type = "number" value={this.state.value} onChange = {this.onChange}/>
<button> 입력 ! </button>
</form>
<div>{this.state.result}</div>
</div>
);
}
React Fragment
<div> </div> 태그 대신에 <React.Fragment> </React.Fragment>를 사용하면 따로따로 div을 받을 수 있음
나중에 Babel 문법 지원한다면 <React.Fragment> </React.Fragment>태그 대신 <></> 태그를 쓸 수 있음
form이 들어가면 무조건 onSubmit을 써줌 <button type = "submit">
form이 들어가면 onClick을 써줌 <button onClick={this.onSubmit}>
render(){
return (
<React.Fragment>
<div> {this.state.first} 곱하기 {this.state.second}는? </div>
<form onSubmit = {this.onSubmit}>
<input type = "number" value={this.state.value} onChange = {this.onChange}/>
<button> 입력! </button>
</form>
<div> {this.state.result} </div>
</React.Fragment>
);
}
constructor(props)을 쓰기 싫으면 다음과 같이 변경 가능
- 실무에서는 constructor(props)를 쓰지 않고 바로 state를 쓰는 경우가 많음
state = {
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value : '',
result : '',
};
}
prevState 사용하기
- prevState를 사용하면 좋은점?
- 예전값을 가지고 새로운 state를 만들 때는 return을 해주는 함수를 만들 필요가 있음
- ex) this.setState((prevState) => {})
<prevState 사용하지 않은 것 >
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 : '',
});
<prevState 사용한 것 >
if(parseInt(this.state.value) === this.state.first * this.state.second){
this.setState((prevState) => {
return {
result : "정답 " + prevState.value,
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value : '',
};
});
ref
<참고>
javascript Event Listenr
- onclick
- onchange
- onsubmit
- onload
- oninput
- onfocus
- onblur