[React] 6. 이벤트 처리하기
리액트에서 이벤트 처리하기
- 리액트 이벤트는
캐멀 케이스(camelCase)
를 사용한다.
- JSX를 사용하여 문자열이 아닌
함수
로 이벤트 핸들러를 전달한다.
- 이벤트리스너를 추가하기 위해
addEventListener
를 호출할 필요없다.
HTML과 React 이벤트 처리 차이점
JSX
를 사용하여 문자열이 아닌 함수
로 이벤트 핸들러를 전달한다.
// HTML
<button onClick="active()"></button>
// React
<button onClick={active}></button>
- 기본동작 방지
- HTML : false
- React :
preventDefault()
호출
// HTML
<a href="#" onClick="return false"></a>
// React
function handleClick(e) {
e.preventDefault();
}
<a href="#" onClick={handleClick}></a>
참고
- 캐멀케이스(camelCase)란?
- 맨 처음 문자는 소문자로 표기하되, 각 단어의 첫 문자를 대문자로 표기하는 것
- 예시: backgroundColor, typeName, iPhone
Author And Source
이 문제에 관하여([React] 6. 이벤트 처리하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@reveloper-1311/React-6.-이벤트-처리하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
캐멀 케이스(camelCase)
를 사용한다.함수
로 이벤트 핸들러를 전달한다.addEventListener
를 호출할 필요없다.JSX
를 사용하여 문자열이 아닌 함수
로 이벤트 핸들러를 전달한다.// HTML
<button onClick="active()"></button>
// React
<button onClick={active}></button>
preventDefault()
호출// HTML
<a href="#" onClick="return false"></a>
// React
function handleClick(e) {
e.preventDefault();
}
<a href="#" onClick={handleClick}></a>
- 맨 처음 문자는 소문자로 표기하되, 각 단어의 첫 문자를 대문자로 표기하는 것
- 예시: backgroundColor, typeName, iPhone
Author And Source
이 문제에 관하여([React] 6. 이벤트 처리하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@reveloper-1311/React-6.-이벤트-처리하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)