Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

[웹 게임을 만들며 배우는 React] - 구구단 본문

과거 프로그래밍 자료들/React

[웹 게임을 만들며 배우는 React] - 구구단

평부 2022. 9. 2. 09:47

 

참고 : https://velog.io/@forestin_s2/%EC%9B%B9-%EA%B2%8C%EC%9E%84%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-React-2.-%EA%B5%AC%EA%B5%AC%EB%8B%A8-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

[웹 게임을 만들며 배우는 React] 2. 구구단 만들기

리액트의 기능을 최대로 끌어올릴 수 있는 클래스형 컴포넌트로 구현했습니다. state를 사용하기 위함입니다.위 코드가 클래스형 컴포넌트의 구성입니다.LikeButton이라는 클래스가 state와 render 함

velog.io

 

 

1. 클래스형 컴포넌트 : state 사용 위함

 

class GuGudan extends React.component {}

 

 

2. state 

- 변화하는 데이터를 처리할 때 state(상태)를 사용

- state는 변화하는 데이터를 저장하는 것 

 

class GuGuDan extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    num1: Math.ceil(Math.random() * 9),
                    num2: Math.ceil(Math.random() * 9),
                    value: '',
                    result: '',
                    win: 0,
                }
            }

 

 

3. render 

- render 함수 안에서 javascript 코드와 XML을 작성해 화면을 만들겠다 설정

 

 render() {
                return (
                    <>
                        <h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
                        <form onSubmit={this.onSubmit}>
                            <input type="number" value={this.state.value} onChange={this.onChange} />
                            <button>submit</button>
                        </form>
                        <h3>{this.state.result}</h3>
                        <h4>{this.state.win} 연속 정답!</h4>
                    </>
                )
            }

 

 

4. ReactDom.render 

- render 함수에서 무엇을 만들 것인지 언급했다면 ReactDom.render에서 render에서 사용할 코드 작성

- 웹에다가 실제로 렌더링 해주는 역할

 

// ReactDOM.render(<클래스명 />, 컴포넌트가 들어갈 곳);
 <script type="text/babel">
        ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
 </script>

 

 

5. 렌더링

- <form onSubmit={this.onSubmit}>에서 바로 함수를 만들지 않고 클래스에 따로 정의한 다음 사용

- setState : 상태를 설정할 때 사용, 사용 시 render 함수가 다시 실행됨

- 만약 render 함수에 함수를 그대로 넣으면 render 함수가 실행될 때마다 함수가 계속 생성됨

(따라서 클래스 안에 함수를 정희하고 사용함)

 

 

6. React.Fragment

- 리액트가 처음 생겼을 때 무조건 <div></div>태그를 썼어야 하지만 시간이 지날수록 불편해짐

- <React.Frament></React.Fragment> 사용 시 필요 없는 <div></div> 태그를 피할 수 있음

 

  render() {
                return (
                    <React.Fragment>
                        <h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
                        <form onSubmit={this.onSubmit}>
                            <input type="number" value={this.state.value} onChange={this.onChange} />
                            <button>submit</button>
                        </form>
                        <h3>{this.state.result}</h3>
                        <h4>{this.state.win} 연속 정답!</h4>
                    </React.Fragment>
                )
            }

 

* 전체 코드

더보기 
<html>

<head>
    <meta charset="utf-8" />
    <title>구구단</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- react가 동작하는 핵심적인 코드가 존재 -->
    <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>
    <!-- react코드를 웹에다가 붙여주는 역할 -->
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const e = React.createElement; // HTML 태그를 만들어주는 함수

        class GuGuDan extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    num1: Math.ceil(Math.random() * 9),
                    num2: Math.ceil(Math.random() * 9),
                    value: '',
                    result: '',
                    win: 0,
                    result2: ''
                }
            }

            onSubmit = (e) => {
                e.preventDefault();

                const answer = this.state.num1 * this.state.num2;
                const cur_win = this.state.win;
                if (parseInt(this.state.value) === answer) {
                    //parseInt : 자료를 int형으로 변환
                    //예전 state값으로 새로운 state를 만들 때는 새로운 함수를 씀
                    this.setState((prevState) => {
                        return {
                            num1: Math.ceil(Math.random() * 9),
                            num2: Math.ceil(Math.random() * 9),
                            value: '',
                            // result: `${prevState.value} 정답!`,
                            result: `정답! ${this.state.num1} * ${this.state.num2} = ${this.state.value}`,
                            win: cur_win + 1,

                        }
                    })
                }
                else {
                    this.setState({
                        value: '',
                        result: `오답...`,
                        win: 0
                    })
                }

            }

            onChange = (e) => {
                console.log(e);
                this.setState({ value: e.target.value });
            };
            render() {
                return (
                    <React.Fragment>
                        <h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
                        <form onSubmit={this.onSubmit}>
                            <input type="number" value={this.state.value} onChange={this.onChange} />
                            <button>submit</button>
                        </form>
                        <h3>{this.state.result}</h3>
                        <h4>{this.state.win} 연속 정답!</h4>
                    </React.Fragment>
                )
            }
        }

        function Test() {
            return <h1>test</h1>
        }
    </script>
    <script type="text/babel">
        // 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임 
        ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
    </script>
</body>

</html>
저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > React' 카테고리의 다른 글

[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩  (0) 2022.09.27
[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩  (0) 2022.09.27
kakao login notnull violation: user.email cannot be null 해결법  (0) 2022.08.26
[러닝리액트 2판] 3장 자바스크립트를 활용한 함수형 프로그래밍 1  (0) 2022.06.09
React로 좋아요 버튼 누르기(1) - mongoDB users에 정보 담기  (0) 2022.05.26
'과거 프로그래밍 자료들/React' Related Articles more