state
state는 컴포넌트 인스턴스이다. 컴포넌트 내에서 데이터의 변경을 감지하는 부분을 의미한다고 할 수 있다. 리액트를 이해하기 위해서는 state를 올바르게 사용할 수 있어야 한다.
constructor(props){
super(props);
// 바뀌는 부분을 속성으로 넣어준다.
this.state = {
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value : '',
result : ''
};
}state에 값이 변할 부분을 선언해준다.
render(){
return (
<div>
<div>{this.state.first} 곱하기 {this.state.second}는?</div>
<form>
<input type="number" value={this.state.value} onChange={e=> this.setState({value : e.target.value})}/>
<button>입력</button>
</form>
</div>
);
}
// 여기서 onChange={e=> this.setState({value : e.target.value})} 를 통해 내부의 값을 코드로 직접 관리한다. state값을 바꾸기 위해서는 setState를 사용해야한다. 객체을 함부로 바꾸지 않는다
form 태그 역시도 안에 onSubmit을 통해 데이터 검증을 해준다
<form onSubmit= {e=> {
e.preventDefault();
if(parseInt(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 : ''
})
}
}}>간단한 구구단 리액트 코드는 아래와 같다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="http://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="http://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>구구</title>
</head>
<body>
<div id="root"></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 : '',
};
}
render(){
return (
<div>
<div>{this.state.first} 곱하기 {this.state.second}는?</div>
<form 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 : '',
})
}
}}>
<input type="number" value={this.state.value} onChange={e=> this.setState({value : e.target.value})}/>
<button>입력</button>
</form>
<div>{this.state.result}</div>
</div>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan/>, document.querySelector("#root"));
</script>
</body>
</html>
공부와 일상