[구구단 게임] class로 컴포넌트

 

vscode로 열기 

 

 

local 서버로 실행 

 

 

 

사용하던 first-app 폴더를 그대로 사용함 

 

 

 

컴포넌트는 앞에 대문자를 사용하는게 원칙임 

jsx 파일은 리액트 프로젝트에서만 사용하는 파일임

js로 만들어도 무관함. 

jsx도 자바스크립트에 포함되기 때문에 js로도 사용 가능하지만 

리액트 컴포넌트임을 알기 쉽게 하기 위해서 jsx로 함

 

 

 

단축 기능이 있음 

rfc를 치면 

자동으로 아래와 같이

파일의 이름으로(Gugudan) 함수를 만들어줌 

 

 

export -> index에서 구구단 컴포넌트를 불러오는데 export가 붙어있어야 되어야 불러올 수 있음 

 

index.js에서 기존 불러오던 App컴포넌트를 지우고 Gugudan을 불러왔다.

 

 

 

출력화면이 Gugudan으로 바뀐것을 확인 할 수 있다. 

 

 export와 default가 없으면 에러가 남

 

 

 

컴포넌트를 작성하는 방법은 두 가지 방법이 있는데

초창기에는 클래스를 많이 사용하고 

현재는 함수로 많이 사용한다고 한다. 

 

클래스와 함수 모두 사용해 보겠다.

 

 

1. 클래스로 컴포넌트 작성

 

import React from "react";

//구구단 클래스 컴포넌트
class Gugudan extends React.Component {
  // state 추가하기
  state = {
    first: Math.ceil(Math.random() * 9),
    second: Math.ceil(Math.random() * 9),
    value: "",
    result: "",
  };
  render() {
    return (
      <>
        <div>
          <h2>✖구구단 게임✖</h2>
          {this.state.first} 곱하기 {this.state.second} 는?
        </div>
        <form onSubmit={this.Submit}>
          <input
            type="number"
            onChange={(e) => this.setState({ value: e.target.value })}
            value={this.state.value}
          />
          <button>입력!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    );
  }
}

export default Gugudan;

 

 

 

현재 입력 (submit)을 누르면 입력창의 값이 사라지기 때문에 

해당 이벤트를 중지하기 위해서 코드를 추가했다. 

 

  <form onSubmit={this.submit}>

 

 

 

 

  submit = (e) => {

    e.preventDefault(); //submit이벤트중지 -> 입력창 값 사라지는것

    if (parseInt(this.state.value) === this.state.first * this.state.second) {

      this.setState({ result: "딩동댕" });

    }

  };

 

 

** 입력창에 입력된 값과

   state의 first  과 state의 second 값을 곱한 값이 일치하면

   딩동댕이라는 값을 result에 넣는다 .

 

 

이곳에 표시됨

 

 

 

 

 

그리고 틀렸을 때는

 

 

그리고 정답 일 때는 게임을 초기화해서 다시 할 수 있도록 한다. 

 

first와 second는 다시 랜덤 값으로 돌려주기

value(입력창도 초기화 하기)

 

커서를 입력창으로 이동한다. 

 

 

점수 기능을 추가한다. 

state에 점수 기본 값을 0으로 주고 

 

맞추면 +1

틀리면 -1 이 되게끔 코드에 추가한다

 

 

점수가 출력될 공간을 만들어 준다. 

 

 

테스트하기 

1. 정답

 

 

 

2. 오답