카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

미해결

constructor 안써도 된다고 하셧는데

20.10.25 16:06 작성 조회수 93

제 코드에서 지우니까 render에서 오류가 나서요 ㅠㅠ

왜일까용,,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/babel.min.js"></script>
    <title>gugudan</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:'',
               answer:'',
           };
       }
       //직접만든 함수는 화살표함수만 써야함!
       onSubmit=(e)=>{
           e.preventDefault();
           if(parseInt(this.state.value)===this.state.first*this.state.second){
               this.setState({
                   result:'correct',
                   first:Math.ceil(Math.random()*9),
                   second:Math.ceil(Math.random()*9),
                   value:'',
                   answer:this.state.first*this.state.second+' ',
               })
           }else{
               this.setState({
                   result:'wrong',
                   value:'',
                   answer:'틀렷음 ',
               })
           }

       }
       onChange=(e)=>{
           this.setState({value:e.target.value})
       }
       render(){
           return (
               <>
                   <div>{this.state.first}곱하기 {this.state.second}는?</div>
                   <form onSubmit={this.onSubmit}>
                       <input type="number" value={this.state.value} onChange={this.onChange}/>
                       <button onClick={this.onSubmit}>입력!</button>
                   </form>
                   <div>{this.state.answer} {this.state.result}</div>
               </>
           );
       }
    }
    //<></>이거 안되면 <React.Fragment>이걸로 쓰면 됨다
</script>
<script type="text/babel">
    ReactDOM.render(<Gugudan/>,document.querySelector('#root'))
</script>
</body>
</html>