<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>
위 두 개 코드는 react와 react로 DOM을 다루기 위한 것이라고 하며,
아래는 react를 좀 더 깔끔하게 사용할 수 있도록 'babel'이라는 것을 불러온 것이라고 한다.
<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 : `${this.state.first} x ${this.state.second} = ${this.state.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})}
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>
)
}
}
</script>
<script type = 'text/babel'>
ReactDOM.render(<Gugudan />, document.querySelector('#root'));
</script>
코드를 보면,
class 형태를 사용하여 재사용성을 높였다는 것이 보인다.