REACT ④ Events

🚩 해당 글은 유튜브 The Net Ninja와 React 공식문서를
공부한 토대로 작성된 글입니다. 혹시라도 잘못된 글이 있다면
댓글로 알려주세요 🏃‍♀️🏃‍♀️

Handling Events

• 기본적으로 DOM 엘리먼트가 이벤트를 핸들링하는 방법이 비슷하다.
• 이벤트 이름의 경우 camelCase를 사용한다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

• 리액트 사용시 addEventListener를 불러낼 필요없이 사용할 수 있다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

■ 이벤트에 매개변수 전달하기

1. arrow functions

const Home = () => {
  const handleClickAgain = (name) => { 
    console.log(`hello ${name}!`);
  }

  return ( 
    <div className="home">
      <h2>Hompage</h2>
      <button onClick={ (e) => handleClickAgain('kim',e) } type="button">
        Click Me! Again!
      </button>
    </div>
   );
}

2. Function.prototype.bind

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

참고자료: https://reactjs.org/docs/handling-events.html