일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 시퀀스 조회
- Intellij
- 추천 사이트
- 개발시작전 자세
- 비밀번호 변경 명령어
- select
- 순서 보장
- 다른사람 프로젝트 수정전 가져야할 자세
- cmd
- 자바스크립트 인라인
- it
- Test 룸북 사용하기
- #{..}
- 스프링부트
- 리눅스
- js
- 프로젝트 클린
- 추천 프로그램
- 타임리프
- 룸북
- 함수 인자값 id
- 명령어
- BindingResult
- Java
- StringUtils.hasText
- 하모니카 OS 5
- 설정
- 타임리프와 스프링
- linux
- JSON
Archives
- Today
- Total
웹개발 블로그
Event Handling(이벤트핸들링) 이란? 본문
Event
웹 내부에서 발생하는 사용자의 행동
ex) 버튼 클릭, 메시지 입력, 스크롤 등
Handling
다루다, 취급하다, 처리하다.
⭐Event Handling(이벤트 핸들링)
이벤트가 발생했을 때 그것을 처리하는 것.
(웹에서 발생하는 사용자 행동을 처리하는 것)
- ex1) 버튼 클릭 시 경고창 노출
- ex2) 콘솔의 메시지를 출력
정리
- 클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를 이벤트 핸들러라 부른다.
- 이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수
- 익명함수 OR 화살표 함수
👀예제
//클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를
//이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수
//익명함수 OR 화살표 함수로 만들어 주면 된다.
const onClickButton = () => {
console.log("클릭");
}
...(생략)
return(
// 클릭이벤트 핸들러로 onClickButton으로 설정
//콜백함수를 전달하듯, 함수이름만 적어야 함.
<button onClick={onClickButton}> </button>
)
'◆React.js & Next.js & Node.js > React.js(라이브러리)' 카테고리의 다른 글
[React] 리렌더링(Re - Renderling)은 언제 실행되나? (0) | 2025.02.04 |
---|---|
[React] useRef란? / useState차이? (0) | 2025.02.01 |
[React] (플로그인) ESLint 설치 및 설정 (0) | 2025.01.30 |
[React] useForm > checkbock > setFocus 중앙 이동? (0) | 2025.01.23 |
[React] JSX란? (1) | 2025.01.09 |