[React Document] 이벤트 처리하는 방법

이 포스팅은 React Document 주요개념 이벤트 처리하기 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다.

React에서 이벤트를 처리하는 방식은 일반 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 하지만 매우 유사할 뿐이지 다른점도 있습니다. 차이점은

• React의 이벤트는 소문자 가 아닌 CamelCase를 이용합니다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트를 전달한다.

💡 React 이벤트 소문자가 아닌 CamelCase를 이용한다.

HTML에서의 element에 이벤트를 주는 방법은 다음과 같습니다.

// DOM에서의 이벤트
<button onclick="eventListener()">버튼</button>

// React에서의 이벤트
<button onClick={eventListener}>버튼</button>

DOM에서는 onclick 을 사용하고 React에서는 Camelcase인 onClick을 사용한다는점을 주의하면 됩니다.

💡 이벤트 동작을 방지하는 방법

기존 자바스크립트에서 많이 사용하는 event 동작 방식으로는 다음과 같은 문법을 DOM에서 사용하였습니다

<a href="#" onclick="return false">
  click
</a>

하지만 React에서는 return false로 반환해도 실제로 이벤트의 기본동작을 방지할 수 없습니다. React에서는 이벤트의 기본동작을 방지하기 위해서는 return false가 아닌 이벤트에 preventDefault()를 명시적으로 호출해줘야 합니다.

function ActionLink() {
 
  function handleClick(e) {
    e.preventDefault(); 
  }
  
  return (
    <a href="#" onClick={handleClick}>
      click
    </a>
  )
}

실제 React Document사이트에는 this 바인딩, 이벤트 핸들러에 인자 전달하기에 대한 내용이 있지만 Javascript와도 관련된 내용이라 따로 언급하지 않고 지나가도록 하겠습니다 !