import React, { useState } from "react";
/*
! React 이벤트 객체의 타입 정의
== 이벤트 타입 ==
: 이벤트 종류에 따라 다르게 표현
EX) 입력 필드에 대한 변경 이벤트: React.ChangeEvent
EX) 폼 제출 이벤트: React.FormEvent
>> 해당 이벤트를 사용하는 핸들러 로직에는 폼제출의 기본 동작 방지
e.prventDefault()
EX) 클릭 이벤트: React.ClickEvent
EX) 키보드 이벤트: React.KeyboardEvent<>
EX) 마우스 이벤트: React.MouseEvent
*/
export default function UseState03() {
const [count, setCount]= useState<number>(0);
const [input, setInput]= useState<string>('');
const [enter, setEnter]= useState<string>('');
// # 클릭 이벤트 핸들러
const handleIncrementBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
setCount(p=> p+1);
console.log(e.target);
};
// # 입력 이벤트 핸들러
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
setInput(e.target.value);
console.log(e.target);
};
// # 키보드 이벤트 핸들러
// >> 'Enter'키 클릭에 대한 반응을 처리
const handleKeyboard = (e: React.KeyboardEvent<HTMLInputElement>) => {
console.log(e.key);
if(e.key=== 'Enter'){
console.log('Enter키가 눌림');
// 입력된 내용을 배열의 요소에 추가, 다양한 로직 활용
}
setEnter(e.currentTarget.value);
};
return (
<div>
<hr />
<h5>이벤트 객체의 여러 타입</h5>
<p>현재 카운트: {count}</p>
<button onClick={handleIncrementBtn}>증가</button>
<input
type="text"
onChange={handleInput}
placeholder="입력 이벤트 처리"
value={input}
/>
<input
type="text"
onKeyDown={handleKeyboard}
placeholder="Enter키 이벤트 처리"
value={enter}
/>
</div>
);
}
'React' 카테고리의 다른 글
React 활용 예시(UseState05) (0) | 2024.08.28 |
---|---|
React 활용 예시(UseState04) (2) | 2024.08.28 |
React 활용 예시(UseState02) (0) | 2024.08.28 |
React 활용 예시(useState) (0) | 2024.08.28 |
React 활용 예시(Handler02) (0) | 2024.08.28 |