카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

미해결

구구단 만들기 강의에서 궁금한 점이 생겨 질문드립니다.

22.09.22 21:41 작성 조회수 229

안녕하세요. 웹 게임을 만들며 배우는 React 강의 수강중인 초보자입니다!
구구단 만들기 강의를 듣다가 궁금한게 생겨 문의드립니다

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></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: '',
      };
    }

    render() {
      return (
        <div>
          <div>{this.state.first} 곱하기 {this.state.second}는?</div>
          <form>
            <input type="number" value={this.state.value} onChange={(e)=> {this.setState({value : e.target.value}) }}/>

            <button>입력!</button>
          </form>
          <div>{this.state.result}</div>
        </div>
      );
    }
  }

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

위 코드로 화면을 띄워주셨었는데요.

위 코드에서 아직 button에 대한 동작은 작성하지 않았는데
여기서 버튼만 눌러도 this.state.first와 this.state.second 값이 왜 변하는 걸까요 ??