Event Handling

React

Event Handling

growdeveloper 2023. 2. 1. 14:37

HTML DOM에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.

JSX에 이벤트를 설정할 수 있습니다.

Class Comp extends React.Component {
	render() {
    	return (
        	<div>
            	<button onClick={() => {
                	console.log('clicked');
                }}>클릭</button>
            </div>
        )
    }
}

Event Hadling

camelCase 로만 사용할 수 있습니다.
- onClick, onMouseEnter
이벤트에 연결된 자바스크립트 코드는 함수입니다.
- 이벤트 = {함수} 와 같이 씁니다.
실제 DOM 요소들에만 사용 가능합니다.
- 리액트 컴포넌트에 사용하면, 그냥 props로 전달합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root1"></div>
  <div id="root2"></div>
  <div id="root3"></div>
</body>
<script type="text/babel">

  //function을 이용한 컴포넌트
  // function Component() {
  //   return (
  //         <div>
  //           <button onClick={() => {
  //             console.log("click");
  //           }}>클릭</button>
  //         </div>
  //   );
  // }


  //생성자를 이용한 방식
  class Component1 extends React.Component {
    state = {
      count : 0,
    };

    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("click");
      this.setState((state)=> ({...state, count: state.count+1,}));
    }
  }

  //함수에서 해결하는 방식
  class Component2 extends React.Component {
    state = {
      count : 0,
    };
    render() {
     return (
            <div>
              <p>{this.state.count}</p>
              <button onClick={this.click}>클릭</button>
            </div>
          );
    }

    click = () => {
      console.log("click");
      this.setState((state)=> ({...state, count: state.count+1,}));
    }
  }

  ReactDOM.render(<Component1/>,document.querySelector("#root1"));
  ReactDOM.render(<Component2/>,document.querySelector("#root2"));



</script>
</html>