[js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치)

구구단 게임

 

리액트 클래스로 구현한

구구단 게임 입니다.

 

예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.

 

class 방식 사용 방법
· state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. 
· input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다.
· this.setState 사용방법: this.setState ({ 변경 후의 데이터 })
· html에서 class 속성 대신 className을 사용합니다.
· html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다.
· setState는 비동기입니다.

 

리액트, 바벨 cdn 설치

간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

리액트 구구단 게임 구현

html

<div id="root"></div>

 

script

    <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.value + ' 정답입니다.',
                       first: Math.ceil(Math.random()* 9),
                       second: Math.ceil(Math.random() * 9),
                       value: '',
                   });
                    this.input.focus();
                }else{
                    this.setState({
                       result: this.state.value + ' 틀렸습니다.',
                       value: '',
                   });
                     this.input.focus();
                }
            };
            
            onChange = (e) => {
                this.setState({value: e.target.value}); 
            }
            
            input;
            
            render() {
                return (
                <div>
                    <div>{this.state.first} 곱하기 {this.state.second} 는?</div>
                    <form onSubmit={this.onSubmit}>
                        <input ref={(c) => {this.input = c}} type="number" value={this.state.value} 
                        onChange={this.onChange} />
                        <button type="submit">입력</button>
                    </form>
                    <div>결과는? {this.state.result}</div>
                </div>
                );
            }       
        }
        
    </script>
    <script type="text/babel">
        ReactDOM.render(<Gugudan />, document.querySelector('#root'));
    </script>

 

focus() 사용

ref를 이용하여 focus를 사용합니다.

render 함수
<input ref={(c) => {this.input = c}} //input 이름은 자유

class 안에서 input 선언

메소드에서 this.input.focus();

 

화면 결과 (Result 보기)

---

hooks 방식으로 구구단 게임 구현은 아래로 이동해 주세요. 

https://goddino.tistory.com/142

[js] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn으로 설치)