React - 버튼 클릭 이벤트 등록하기

리액트 컴포넌트에 이벤트 등록을 하는 방법에 대하여 알아보겠습니다.

 

일반적인 HTML에서 이벤트 등록하는 방법과 비슷하지만

몇가지 차이가 있습니다.

 

리액트에서는 camelCase를 사용합니다.

onClick, onKeyup 이렇게 말이죠

<button onClick={clickHandler}>이벤트</button>

위와 같이 이벤트를 등록할 수 있습니다.

  function clickHandler(e) {
    alert('click')
  }

이렇게 clickHandler에 e 파라미터가 넘어오는데

e 매개변수로 preventDefault()와 stopPropagation() 을 사용할 수 있습니다.

preventDefault는 이벤트의 기본 동작을 방지하고,

stopPropagation은 이벤트가 상위 컴포넌트로 버블링 되는 것을 방지 할 수 있습니다

See the Pen Untitled by Young Jun Koo (@YoungJu-Ku) on CodePen.