개발노트

1. (3) 구구단게임 본문

React/basic

1. (3) 구구단게임

aloha2jh 2020. 7. 14. 14:08 
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>study</title>
        <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>
    <body>
        <div id="root"></div>
        <script type="text/babel"> 
            class GuGudan extends React.Component{  
                constructor(props){
                    super(props);

                    this.state={   
                        firstNum : Math.ceil( Math.random() *9 ),
                        secondNum : Math.ceil( Math.random() *9 ),
                        value:'',
                        result:'',
                    }
                } 

                guguCheck = (e) => {
                    e.preventDefault();
     
                    if( parseInt(this.state.value) === this.state.firstNum*this.state.secondNum){
                        this.setState({
                            result: result:`${this.state.value} : correct`,,
                            firstNum: Math.ceil( Math.random() * 9 ),
                            secondNum: Math.ceil( Math.random() * 9),
                            value:''
                        })
                    }else{
                        this.setState({
                            result:'try again',
                            value:''
                        })
                    }
                }

                inputChange = (e) =>{
                     this.setState( { value: e.target.value }  )
                }

                render(){ 
                    return (
                        <div>
                            <p>{this.state.firstNum}곱하기 {this.state.secondNum}는?</p>
                            <form onSubmit={this.guguCheck}>
                                <input type="number" value={this.state.value} 
                                    onChange={ this.inputChange } />
                            </form>
                            <p>{this.state.result}</p>
                        </div>
                    )
                } 
            }
        </script> 

        
        <script type="text/babel">  
            ReactDOM.render( <GuGudan /> , document.querySelector('#root') );    
        </script>
    </body>
</html>​

1. 변할 값들을 state로 만들어준다 

2. 변할 값들 html 에다가 { this.state.blabla }로 넣어주고

3. 입력받는 값 중 

input 일경우 onChange이벤트 발생시켜서

글자칠때마다 e.target.value로 사용자가 친 값들 받아와서

setState로 직접 input안의 value를 바꿔줘야 한다

4. 함수를 클래스안의 메서드로 빼서 { this.메서드이름 }  으로 연결하였다

 

 

 

 

 

 

   guguCheck = (e) => {
                    e.preventDefault();
     
                    if( parseInt(this.state.value) === this.state.firstNum*this.state.secondNum){
                        this.setState({
                            result: result:`${this.state.value} : collect`,,
                            firstNum: Math.ceil( Math.random() * 9 ),
                            secondNum: Math.ceil( Math.random() * 9),
                            value:''
                        })
                    }else{
                        this.setState({
                            result:'try again',
                            value:''
                        })
                    }
                }
                
 guguCheck = (e) => {
                    e.preventDefault();
     
                    if( parseInt(this.state.value) === this.state.firstNum*this.state.secondNum){
                        this.setState( (prevState) => {  //
                            return {
                                result:`${prevState.value} : correct`,
                                firstNum: Math.ceil( Math.random() * 9 ),
                                secondNum: Math.ceil( Math.random() * 9),
                                value:''
                            }
                        })
                    }else{
                        this.setState({
                            result:'try again',
                            value:''
                        })
                    }
                }

이전값을 가져올때는 prevState를 인자로받아서 지금 setState하는 값과 이전값을 구분한다

예전함수 값을 가져올땐 (this.state)값이 들어가면 return 을 사용해서 값을 set해주자 ///// 이유는 차차알아가는걸로

 

 

 

 

정답 채점 후

input 에다가 focus주려면?

 <input   ref={ (c)=>{this.wannaFocusInput = c;} }  type="number" value={this.state.value} 
                                    onChange={ this.inputChange } />
                                    
wannaFocusInput;              

this.wannaFocusInput.focus();

1. ref 속성을 추가해 함수를 추가한다음 

2. input 변수선언하고

3. 2의 input변수에다가 input태그를 실제로 넣어줌

(함수로 넣어준것임)

 

그래서 그 input변수에 focus를 하면 포커스 된다.

 

 

 

 

 

 

this.setState 할때마다  render()가 호출되서 화면을 다시 그려서 비효율적

+ 렌더가호출되기때문에 함수를 render안에 적을경우 계속 함수를 새로생기니까 

메서드로 빼야된다.

<input   ref={ this.refInput  }  type="number" value={this.state.value} 
                                    onChange={ this.inputChange } />
                                    
focusInput;  //

refInput = (c) =>{
	this.focusInput = c;  
}

 

 


+

ref , class component 도 hooks처럼 할수 없나?

import React ,{ Component , createRef } from 'react';

1. createRef를가져온다

 

    // inputRef;
    // onInputRef = (v) =>{
    //     this.inputRef = v;
    // }
    inputRef = createRef();  //
    
	//<input ref={this.onInputRef} /> 
    <input ref={this.inputRef} />    //

2. inputRef에 넣어주고

3. 그걸 render안의 input태그 ref에 연결

 

this.inputRef.current.focus();

4. current를 써서 사용.

 

 

 

 

함수방법은 다른기능 console.log 들 추가할수 있고, 간단한기능은 createRef 쓰면 된다.

'React > basic' 카테고리의 다른 글

3. (2)babel  (0) 2020.07.15
3. (1)webpack  (0) 2020.07.14
2. Hooks  (0) 2020.07.14
1. (2)HTML속성, 상태(State), JSX  (0) 2020.07.13
1. (1)react component  (0) 2020.07.13
'React/basic' Related Articles more