1) 학습내용

이벤트연결하기(클릭한 횟수올려보기)

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <!-- 리액트 사용 준비 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script 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 App extends React.Component {
        constructor (props) {
          super(props)
          this.state = {
            count: 0
          }

          this.countUp = this.countUp.bind(this)
        }

        render () {
          return <div>
            <h1>클릭한 횟수: {this.state.count}</h1>
            <button onClick={this.countUp}>클릭</button>
          </div>
        }

        countUp (event) {
          this.setState({
            count: this.state.count + 1
          })
        }
      }

      // 출력하기
      const container = document.getElementById('root')
      ReactDOM.render(<App />, container)
    </script>
  </body>
</html>

결과

다른방법으로도 해보기

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <!-- 리액트 사용 준비 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script 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 App extends React.Component {
        constructor (props) {
          super(props)
          this.state = {
            count: 0
          }
        }

        render () {
          return <div>
            <h1>클릭한 횟수: {this.state.count}</h1>
            <button onClick={(e) => this.countUp(e)}>클릭</button>
          </div>
        }

        countUp (event) {
          this.setState({
            count: this.state.count + 1
          })
        }
      }

      // 출력하기
      const container = document.getElementById('root')
      ReactDOM.render(<App />, container)
    </script>
  </body>
</html>

결과

위에 코드와 결과가 같다

2)어려웠던점

버튼을 클릭했을때 숫자가 올라가는건 만들었지만 클릭했을때 숫자가 내려가는것도 만들어볼려고했지만
실패..

3)해결방법

조금더 공부를 해야겠다..

4)소감

간단하게 이벤트 연결해서 버튼을 클릭하면 카운트가 올라가는것을 만들어보았는데 다음에는 복합적으로 만들어보도록 노력을해봐야겠다.