리액트 이벤트

리액트 이벤트 특징

1. React 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
2. JSX를 사용하기에, Event Hanlder를 '문자열()'이 아닌 {함수}로 전달한다.

리액트의 이벤트1 : 클래스의 메서드로 만들어진 이벤트핸들러 전달

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

리액트의 이벤트2 : 익명/화살표 함수 응용 이벤트 핸들러 적용 (BEST)

<button onEvent={ () => { setState(state+1) }} > 
  카운트버튼 
</button>

기존 HTML의 이벤트

<button onclick="activateLasers()">
  Activate Lasers
</button>

3. React에서는 false를 반환해도 기본동작을 방지할 수 없으며,
   반드시 preventDefault 메소드를 명시적으로 호출해야 한다.

리액트의 기본동작 방지

function Form() {
  function handleSubmit(e) {
    e.preventDefault();		// e 라는 합성이벤트의 기본동작을 방지하는 preventDefault()메소드
    console.log('You clicked submit.');
  }

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

기존의 기본동작 방지

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

리액트 이벤트 예시

function Like() { // Like 함수형 컴포넌트
  let [좋아요,좋아요추가] = useState(0); 
  //state 좋아요의 초기값을 0으로 할당 및 state변경함수 할당 using useState hook

  return (
    <div className="Like">
      <div className="title">좋아요 기능</div>
      <div className="list">
        <button onClick ={() => { // react 이벤트 추가
          좋아요추가(좋아요+1)
        }}> {' '}좋아요 추가하기
        </button>
        <h3>{좋아요}</h3>
      </div>
    </div>
  )
}