[React] 게임으로 배우는 리액트 - 구구단게임 만들기

728x90

리액트문법을 이용해서 간단한 구구단 게임을 만들려고 합니다!

<html>
    <head>
        <meta charset="UTF-8">
        <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@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 = {
                        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: '',
                        });
                    } else {
                        this.setState({
                            result: '떙',
                            value: '',
                        });
                    }
                };

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

                render(){
                    return (
                        <div>
                            <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>
                        </div>
                    );
                }
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
        </script>
    </body>
</html>

우선 코드와 실행결과인데요 간단한 코드 설명을 조금 해볼까요??

this.state = {
    first: Math.ceil(Math.random() * 9),
    second: Math.ceil(Math.random() * 9),
    value: '',
    result: '',
};

우선 class안에 this.state는 변화되는것을 의미합니다.

구구단 게임을 만들것이기 때문에 1부터 9까지의 랜덤 숫자를 2개 만들기 위해 first와 second라는 이름으로 숫자를 만들었습니다.

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: '',
        });
    } else {
        this.setState({
            result: '떙',
            value: '',
        });
    }
};

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

render(){
    return (
        <div>
            <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>
        </div>
     );
}

해당 코드는 조금 길어보이지만 한번에 설명하겠습니다.

먼저 onSubmit 메서드와 onChange 메서드는 아래쪽 render에 들어갈 함수인데 사실 함수안에 직접 작성해도 되지만 될수 있으면 babel안에 jsx를 같이 쓰지 않는것이 좋다고 합니다.

그래서 따로 메서드로 만들어주고 메서드를 입력해주었습니다.

onSubmit 메서드는 value가 랜덤으로 만들어진 두개의 숫자의 곱과 일치하면 정답이라는 메세지를 출력하고 새로운 문제를 주고 틀렸을 경우 땡이라는 문자를 출력합니다.

render 부분에서 return 다음에 ()를 사용하여 바벨을 ()로 감싸준 이유는 괄호로 굳이 감쌀 필요는 없으니 개인의 코딩 스타일입니다.

괄호로 감싸줌으로서 태그형식들의 코드 즉 바벨을 조금더 보기 좋게 정렬할수 있기 때문이죠.

728x90

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

[React] 게임으로 배우는 리액트 - ref로 초점맞추기 (0)	2022.05.28
[React] 게임으로 배우는 리액트 - Fragment, setState (0)	2022.05.27
[React] 게임으로 배우는 리액트 - 바벨(babel) (0)	2022.05.25
[React] 게임으로 배우는 리액트 - 기본 문법(class, state, render()) (0)	2022.05.24
[React] 리액트를 왜 사용할까? (0)	2022.05.23

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

티스토리툴바