React Event

• HTML DOM 이벤트와 마찬가지로 사용자 이벤트에 따라 작업을 수행할 수 있음
• 리액트에는 HTML과 동일한 이벤트가 있음

OnClick - 클릭 이벤트

function Button() {
	const handleClcik = () => {
		alert('버튼이 클릭되었습니다.');
	};
	
	return <button onClick={handleClick}>클릭하세요</button>
}

onChange - 입력 변경 이벤트

function Input() {
  const handleChange = (e) => {
    console.log('입력한 값:', e.target.value);
  };

  return <input onChange={handleChange} />;
}

onSubmit - 폼 제출 이벤트

function Form() {
	const handleSubmit = (e) => {
		e.preventDefault(); // 페이지 새로고침 방지
		alert('폼이 제출되었습니다');
	};
	
	return (
		<form onSubmit={handleSubmit}> 
			<input type="text" />
			<button type="submit">제출</button>
		</form>
	);
}

HTML VS React 이벤트 차이

HTML

<!-- 소문자, 대문자 -->
<button onclick="handleClick()">클릭</button>

React

// 카멜케이스, 함수 참조
<button onClick={handleClick}>클릭</button>