LWW

CS / FrontEnd / Programming / DataScience

1 분 소요

Event Handling

  • HTML DOM에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어나도록 해야함
  • JSX에 이벤트를 설정할 수 있음
  • camelCase로만 사용할 수 있음
    • onClick, onMouseEnter
  • 이벤트에 연결된 JavaScript 코드는 함수
    • 이벤트 = {함수}와 같이 씀
  • 실제 DOM 요소들에만 사용 가능
    • React Component에 사용하면, 그냥 props로 전달
class Comp extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('cilcked');
        }}>클릭</button>
      </div>
    );
  }
}



<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // Function Component
    function Component() {
      return (
        <div>
          <button 
            onClick={() => { 
              console.log('clicked');
             }}
          >
            클릭
          </button>
        </div>
      );
    }

    ReactDOM.render(<Component />, document.querySelector('#root'))
  </script>
</body>


react-eventhandling1


<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      state = {
        count: 0,
      };
      render() {
        return (
          <div>
            <p>{this.state.count}</p>
            <button 
              onClick={() => { 
                console.log('clicked');
                this.setState((state) => ({
                  ...state,
                  count: state.count + 1,
                }));
              }}
            >
              클릭
            </button>
          </div>
        );
      }
    }

    ReactDOM.render(<Component />, document.querySelector('#root'))
  </script>
</body>


react-eventhandling2


  • 메서드 분리
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      state = {
        count: 0,
      };
      // bind 방법 1
      constructor(props) {
        super(props);
        this.click = this.click.bind(this);
      }
      render() {
        return (
          <div>
            <p>{this.state.count}</p>
            <button onClick={this.click}>클릭</button>
          </div>
        );
      }
      click() {
        console.log('clicked');
        this.setState((state) => ({
          ...state,
          count: state.count + 1,
        }));
      }
    }

    ReactDOM.render(<Component />, document.querySelector('#root'))
  </script>
</body>



<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      state = {
        count: 0,
      };
      render() {
        return (
          <div>
            <p>{this.state.count}</p>
            <button onClick={this.click}>클릭</button>
          </div>
        );
      }
      click = () => {  // bind 방법 2
        console.log('clicked');
        this.setState((state) => ({
          ...state,
          count: state.count + 1,
        }));
      }
    }

    ReactDOM.render(<Component />, document.querySelector('#root'))
  </script>
</body>


react-eventhandling2

댓글남기기

참고