onChange, onSubmit, onClick 핸들러[특정 동작시, {}안의 js 코드 실행]

onChange={}와 onSubmit={}는 HTML 태그에 이벤트 핸들러를 추가하는 React의 방식입니다. 각각 특정 이벤트가 발생할 때 실행되는 JavaScript 함수를 지정하는 역할을 합니다.

 

onChange={}:

• 이 핸들러는 주로 <input>, <textarea> 및 <select> 태그에서 사용됩니다.
• 사용자가 입력 필드의 내용을 변경할 때마다 onChange 이벤트가 발생합니다.
• 이를 통해 사용자 입력을 실시간으로 추적하고, 상태를 업데이트하거나 검증 로직을 실행할 수 있습니다.
• 예시: 사용자가 텍스트 필드에 입력할 때마다 상태를 업데이트하는 함수를 호출할 수 있습니다.

<input type="text" onChange={(e) => setTextInput(e.target.value)} />

 

onSubmit={}:

• 이 핸들러는 주로 <form> 태그에서 사용됩니다.
• 사용자가 폼을 제출할 때, 즉 '제출' 버튼을 클릭하거나 엔터키를 누를 때 onSubmit 이벤트가 발생합니다.
• 이를 통해 폼 제출 시 실행할 로직을 정의할 수 있습니다. 예를 들어, 폼 데이터를 서버에 보내거나 입력을 검증하는 등의 작업을 할 수 있습니다.
• 또한, 폼 제출의 기본 동작인 페이지 새로고침을 방지하기 위해 event.preventDefault() 메소드를 사용하는 것이 일반적입니다.
• 예시: 폼 제출 시 입력 데이터를 처리하는 함수를 호출할 수 있습니다.

<form onSubmit={(e) => {
  e.preventDefault();
  handleSubmit();
}}>
  <input type="text" />
  <button type="submit">Submit</button>
</form>