[리액트] Event

1. Event란?

• 특정 사건

  • ex) 버튼 클릭 이벤트, 키보드 입력 이벤트 etc….

• DOM Event vs React Event

  • DOM과 React는 모두 이벤트를 사용할 수 있지만 사용 방법에는 차이가 존재

2. Event Handler == (Event Listener)

• 어떠한 사건(event)이 발생하면 해당 사건(event)을 처리하는 역할

• 함수 컴포넌트에서의 Event handler 예시

function Toggle(props){
	const [isToggleOn, setIsToggleOn] = useState(true);
	
	// 방법 1. 함수 안에 함수로 정의
	function handleClick (){
		setIsToggleOn((isToggleOn) => !isToggleOn);
	} 
	
	// 방법 2. arrow function을 사용하여 정의
	const handleClick = () => {
		setIsToggleOn((isToggleOn) => !isToggleOn);
	}
	
	return (
		// 함수 컴포넌트에서 event를 사용할 때
		// this가 아닌 onClick에 바로 정의한 이벤트 핸들러를 넘김
		<button onClick = {handleClick}>
			{isToggleOn ? : "켜짐": "꺼짐"}
		</button>
	);
}

Event handler에 Argument 전달하기

function MyButton(props){
	const handleDelete = (id, event) => { // parameter
		console.log(id, event.target);
	};
	
	return (
		<button onClick = {(event) => handleDelete(1, event)}> // argument
			삭제하기
		</button>
	);
}

인용 자료 출처
처음 만난 리액트