[React] 리액트 이벤트 프로퍼티 onClick/onSubmit 차이점

onClick이랑 onSubmit 차이점이 무엇일까?

난 그동안 모든 이벤트를 onClick으로 처리했는데 두 이벤트 프로퍼티의 차이점을 비교해보고자 한다!

 

onClick이란?

- 용도 : 주로 버튼이나 다른 클릭 가능한 엘리먼트에 대한 클릭 이벤트를 처리하기 위해 사용된다.
- 이벤트 타입 : 마우스 클릭 이벤트에 반응한다.
- 사용법

function handleClick() {
  // 클릭 이벤트 처리 로직
}

<button onClick={handleClick}>Click me</button>

 

주의사항 : <button> 요소뿐만 아니라 다른 클릭 가능한 엘리먼트에도 사용할 수 있다.

 

onSubmit이란?

- 용도 : 주로 폼(form) 엘리먼트에서 전송(submit) 이벤트를 처리하기 위해 사용된다.
- 이벤트 타입 : 폼이 제출될 때 발생하는 이벤트에 반응한다.
- 사용법

function handleSubmit(event) {
  event.preventDefault(); // 기본 제출 동작 방지
  // 제출 이벤트 처리 로직
}

<form onSubmit={handleSubmit}>
  {/* 폼 내용 */}
  <button type="submit">Submit</button>
</form>

- 주의사항 : onSubmit 이벤트 핸들러에서는 반드시 event.preventDefault()를 호출하여 폼의 기본 동작을 막아야 한다.
type="submit"이 있는 버튼을 누를 때 또는 폼 내에서 Enter 키를 누를 때 onSubmit이 호출된다.

 

 

정리

공통점

1. onClick과 onSubmit 둘 다 마우스 클릭 및 키보드 엔터를 통한 이벤트에 대한 핸들러를 설정하는 데 사용되는 프로퍼티이다.

2. onClick과 onSubmit 모두 React의 합성 이벤트 시스템에서 제공하는 event 객체를 받아올 수 있다.

차이점

1. 이벤트 발생 시점
   - onClick : 마우스 클릭 시 발생하는 이벤트에 대응한다.
   - onSubmit  : 폼(form)이 제출될 때 발생하는 이벤트에 대응한다.

2. 사용되는 엘리먼트
   - onClick : 주로 버튼이나 다른 클릭 가능한 엘리먼트에 사용된다.
   - onSubmit : 주로 폼(form) 엘리먼트에 사용되며, 폼 전송(submit) 이벤트를 처리한다.

3. 기본 동작 방지
   - onClick : 클릭 이벤트는 일반적으로 기본 동작이 없어서 따로 방지할 필요가 없다.
   - onSubmit : 제출 이벤트는 폼이 서버로 전송되는 것을 막기 위해 event.preventDefault()를 통해 기본 동작을 방지해야 한다.

4. 호출 시점
   - onClick : 사용자가 클릭하는 즉시 발생한다.
   - onSubmit : 폼 내에서 type="submit"이 있는 버튼을 누르거나, 폼 내에서 Enter 키를 누를 때 발생한다.

5. 주요 사용 예시
   - onClick : 버튼 클릭과 같은 사용자 상호작용을 다루는 데 사용된다.
   - onSubmit : 폼에서 데이터를 제출하고 서버로 전송하는 데 사용된다