[React] 리액트로 구구단 게임 만들기

📌 리액트로 구구단 만들기

✔ this.state 

:  화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들

입력버튼을 누르기 전

입력버튼을 누른 후

위와 같이 입력 버튼을 클릭하기 전과 후에 바뀌는 요소들을 this.state 에 넣어주면 된다.

 

반응형

1. first

2. second

3. value

4. result

 

 

constructor(props) {
  super(props);
  // this.state 에 바뀌는 요소들에 대해 적으면 된다.
  // 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 (boolean 요소들과 같은)
  this.state = {
    first: Math.ceil(Math.random() * 9), // 첫번 째 숫자 : 임의의 아무 숫자나 만들기
    second: Math.ceil(Math.random() * 9), // 두번 째 숫자 : 임의의 아무 숫자나 만들기
    value: '', // 입력창에 들어갈 값 (처음에는 아무 값도 없기 때문에 ''로 적어준다.)
    result: '', // 결과 값 (처음에는 아무 값도 없기 때문에 ''로 적어준다.)
  };
}

// 여기서 {} 안에는 자바스크립트 코드를 넣을 수 있다.
render() {
  return (
      <div>
        <div>{this.state.first} 곱하기 {this.state.second} 는?</div>
        <form onSubmit={(e) => {
          e.preventDefault();
          if (parseInt(value) === this.state.first * this.state.second) {

            this.setState({
              result: '정답',
              first: Math.ceil(Math.random() * 9),
              second: Math.ceil(Math.random() * 9),
              value: '',
            });
          } else {
            this.setState({
              result: '땡',
              value: '',
            });
          }
        }}>
          <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />
          <button>입력!</button>
        </form>
        <div>{this.state.result}</div>
      </div>

  );
}

근데 jsx 와 javascript 를 섞어서 쓰면 안 된다.

 

onSubmit = (e) => {
  e.preventDefault();
  if (parseInt(value) === this.state.first * this.state.second) {

    this.setState({
      result: '정답',
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
    });
  } else {
    this.setState({
      result: '땡',
      value: '',
    });
  }
}

onSubmit 을 이렇게 함수로 빼주고 

<form onSubmit={this.onSubmit}>

return 안에는 이렇게 간단하게 넣어준다. 그러면 코드가 훨씬 간결해진다.

 

<input type="number" value={this.state.value}
                     onChange={(e) => this.setState({value: e.target.value})}/>

input 태그에 들어있는 onChange 도 함수로 빼준다.

 

 

✔ 코드 정리

<div id="root"></div>
<script type="text/babel">

  class GuGuDan extends React.Component {
    constructor(props) {
      super(props);

      // this.state 에 바뀌는 요소들에 대해 적으면 된다.
      // 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 (boolean 요소들과 같은)
      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: '정답',
          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>

 

✔ 결과

- 첫 화면

첫 화면

- 답을 맞췄을 때

정답

정답이라는 문구가 뜨고 다음 문제로 넘어간다.

 

- 답을 틀렸을 때

오답

틀렸다고 소리지르고 다시 문제 풀 기회를 준다.

 

 

➕ input 태그에 focus 주기

: ref 사용하기

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

input 태그 안에 ref={(c) => {this.input = c;}} 를 넣어준다.

 

// input focus를 위한 코드
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>입력!</button>
        </form>
        <div>{this.state.answer} {this.state.result}</div>
      </div>

  );
}
}

return 바깥에 input; 적어주고

 

onSubmit = (e) => {
  e.preventDefault();
  if (parseInt(this.state.value) === this.state.first * this.state.second) {
    // 입력한 값과, 실제 결과가 같다면 값들이 어떻게 바뀔지
    this.setState({
      result: '정답',
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      answer: this.state.first * this.state.second,
    });
    this.input.focus();
  } else {
    this.setState({
      result: '땡!!!!!!!!!!!!!!!!!!!',
      value: '',
      answer:'',
    });
    this.input.focus();
  }
}

화면의 state 가 바뀔 때 마다 input 에 focus가 되도록 

this.input.focus(); 를 적어준다.

 

근데 render 는 너무 자주 실행되기 때문에 ref 내용을 바깥으로 빼주는 것이 좋다.

onRefInput = (c) => { this.input = c; };


<input ref={this.onRefInput} />

 

 

 

 

참고 :  인프런 - 웹 게임을 만들며 배우는 React (조현영)