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

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

HTML과 React 이벤트 처리 차이점

1. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

// HTML
<button onClick="active()"></button>

// React
<button onClick={active}></button>

2. 기본동작 방지

• 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