[React] 리액트에서 onSubmit / onClick 이벤트와 form 태그

form 태그의 내부 / 외부에서 각각 onSubmit / onClick 속성을 통해 이벤트핸들러를 실행해보았다.

그 결과와 사용 방법은 아래와 같다.

 

form 태그 외부 : onSubmit / onClick 속성

0. 이벤트 핸들러 제작

// 이벤트핸들러 제작

const ClickEvent = () => {
  // AJAX 요청
}

 

1. onSubmit 이벤트

• onSubmit 속성은 form 태그 내부에서만 사용가능함
• 아래 코드는 form 태그가 없으므로 onSubmit 속성 사용 불가능

return (
  <div>
    <button onSubmit={ClickEvent}>form 밖의 onSubmit 속성</button>
  </div>
);

 

2. onClick 이벤트

• onClick 속성은 form 태그와 무관하게 사용 가능
• 아래 코드처럼 form 태그 외부에서도 onClick 속성 사용 가능

return (
  <div>
    <button onClick={ClickEvent}>form 밖의 onClick 속성</button>
  </div>
);

 

---

form 태그 내부 : onSubmit  속성

1. 이벤트 핸들러 제작시 event.preventDefalut() 입력하기

• form 태그 내에서 submit 이벤트가 발생나면 새로고침이 일어나 의도한 AJAX 요청이 발생하지 않음
• event.preventDefalut() 를 입력해 submit 관련 태그 고유의 동작을 중단시키기

// 이벤트핸들러 제작

const ClickEvent = (event) => {
  event.preventDefault()       // HTML의 submit 관련 고유 동작 중단시키기
  
  // AJAX 요청하기
}

 

2. form 태그에 onSubmit 속성 사용하기

• button 태그에 onSubmit 속성을 사용하면 실행하니 새로고침이 일어나서 의도한 이벤트 실행 불가

<!-- 새로고침이 일어남 -->

return (
  </div>
    <form>
      <button onSubmit={ClickEvent}>form 내부의 onSubmit</button>
    </form>
  </div>
);

 

• form 태그에서 onSubmit 속성을 사용하면 새로고침 없이 의도한 기능이 구현됨

<!-- form 태그에서 onSubmit 속성 사용하기 -->

return (
  </div>
    <form onSubmit={ClickEvent}>
      <button>form 내부의 onSubmit</button>
    </form>
  </div>
);

 

 

form 태그 내부 : onClick 속성

1. 이벤트 핸들러 제작시 event.preventDefalut() 입력하기

• form 태그 내에서 submit 이벤트가 발생나면 새로고침이 일어나 의도한 AJAX 요청이 발생하지 않음
• event.preventDefalut() 를 입력해 submit 관련 태그 고유의 동작을 중단시키기

// 이벤트핸들러 제작

const ClickEvent = (event) => {
  event.preventDefault()       // HTML의 submit 관련 고유 동작 중단시키기
  
  // AJAX 요청하기
}

 

2. button 태그의 type을 "button"으로 입력하기

• button 태그에 이벤트핸들러를 사용할 경우, event.preventDefalut() 대신 이 방법도 사용 가능
• button 태그의 기본 값은 "submit"인데, 이 때문에 submit 이벤트가 발생
• button 태그 속성을 "button"으로 바꾸면 submit 이벤트가 일어나지 않음

<button type="button">버튼</button>

 

3. onClick 이벤트

• onClick 속성은 form 태그 내부에서도 사용 가능

return (
  <div>
    <form>
      <button onClick={ClickEvent}>form 안의 onClick</button>
    </form>
  </div>
);