React 시작

김민석·2021년 3월 21일
0

react

목록 보기
1/11
<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 형태를 사용하여 재사용성을 높였다는 것이 보인다.

0개의 댓글