[React] 6. 이벤트 처리하기

리액트에서 이벤트 처리하기

  • 리액트 이벤트는 캐멀 케이스(camelCase)를 사용한다.
  • JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
  • 이벤트리스너를 추가하기 위해 addEventListener를 호출할 필요없다.

HTML과 React 이벤트 처리 차이점

  1. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
// HTML
<button onClick="active()"></button>

// React
<button onClick={active}></button>
  1. 기본동작 방지
  • HTML : false
  • React : preventDefault() 호출
// HTML
<a href="#" onClick="return false"></a>

// React
function handleClick(e) {
  e.preventDefault();
}

<a href="#" onClick={handleClick}></a>

참고

  1. 캐멀케이스(camelCase)란?
    • 맨 처음 문자는 소문자로 표기하되, 각 단어의 첫 문자를 대문자로 표기하는 것
    • 예시: backgroundColor, typeName, iPhone

좋은 웹페이지 즐겨찾기