- 이벤트 핸들링은 JS공부하면서 알아야 하는 부분이니 특별히 설명하지 않겠습니다~~
이벤트를 사용할 시 주의 사항
1. 이벤트 이름은 카멜 표기법으로 작성한다.
- html은 onclick으로 작성하지만 react는 onClick으로 작성한다.
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다.
3. DOM 요서에만 이벤트를 설정할 수 있다.
- 즉 div, button, input 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
이벤트 종류
대표적인 이벤트 핸들러 종류는 다음과 같습니다.
- onClick : 마우스 클릭 이벤트를 처리합니다.
- onChange : 입력값이 변경되었을 때 발생하는 이벤트를 처리합니다. input, textarea, select 등의 태그에서 사용합니다.
- onSubmit : 폼(form)이 제출(submit)되었을 때 발생하는 이벤트를 처리합니다.
- onMouseOver : 마우스가 해당 엘리먼트 위에 올라갔을 때 발생하는 이벤트를 처리합니다.
- onKeyPress : 키가 눌렸을 때 발생하는 이벤트를 처리합니다.
- onScroll : 스크롤이 발생했을 때 발생하는 이벤트를 처리합니다.
그 외에도 다양한 이벤트가 있으며, 이벤트 핸들러를 커스텀하게 작성하여 사용할 수도 있다.
그리고 다양한 라이브러리들도 있으니 참고하세요~~
'React' 카테고리의 다른 글
| React 0-6 컴포넌트 반복(map) (0) | 2023.04.28 |
|---|---|
| React 0-5 ref (0) | 2023.04.28 |
| React 0-3 useState (함수 컴포넌트) (0) | 2023.04.28 |
| LV2 24 [1차] 캐시 (0) | 2023.03.30 |
| React 13-2 React-qurery (사용 이유, 장점, 사용 방법) (0) | 2023.03.23 |