Event 사용법

• React는 모든 브라우저에서 동일하게 이벤트를 처리합니다.
• camelCase를 사용합니다.
• JSX를 사용하여 함수로 event handler를 전달합니다.

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

기본 동작 방지

React에선 기본 동작을 방지하기 위해 preventDefault를 호출해야 합니다.

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

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

Event의 처리 순서

Capturing -> Bubbling 순서로 작동된다.

Capturing : 부모 -> 자식 순서

Bubbling : 자식 -> 부모 순서

조금 헷갈릴 수 있어서 console.log로 찍어보았다.

아래 순서대로 로그에 찍힌다.

handleButtonClick

handleClickCapture

handleClickCapture2

handleButtonClick

handleClickBubble

import React from 'react'

export default function Event() {
  const handleButtonClick = () => {
    console.log('handleButtonClick')
  }

  const handleClickCapture = () => {
    console.log('handleClickCapture')
  }

  const handleClickCapture2 = () => {
    console.log('handleClickCapture2')
  }
  const handleClickBubble = () => {
    console.log('handleClickBubble')
  }

  return (
    <div onClickCapture={handleClickCapture}>
      <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
        <button onClick={handleButtonClick}>Button</button>
      </div>
    </div>
  )
}