React는 네이티브 브라우저 이벤트를 SyntheticEvent라는 크로스 브라우저 객체로 감싸고, 앱의 루트에 단일 리스너를 사용하여 이벤트를 핸들러로 디스패치합니다(이벤트 위임). 여러분은 단지 핸들러를 prop으로 붙이기만 하면 됩니다.
jsx
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit)이며 문자열이 아니라 함수를 받습니다(onClick={handleClick}이지 onClick="handleClick()"이 아닙니다).e.preventDefault(), e.stopPropagation(), e.target.렌더링 중에 함수를 호출하지 마세요 — 즉시가 아니라 이벤트 발생 시 실행되도록 감싸세요:
<button onClick={() => remove(id)}>Delete</button> // ✅ 클릭 시 실행
<button onClick={remove(id)}>Delete</button> // ❌ render 중에 실행됨!
두 번째 줄은 JSX를 구성하는 동안(매 render마다) remove(id)를 호출하는데, 이는 거의 원하는 동작이 아닙니다.
폼의 경우, Enter 키도 동작하도록 버튼의 onClick보다 <form>의 onSubmit(preventDefault와 함께)을 선호하세요.