<aside> 💡 리액트에서 submit버튼을 사용할때의 주의점과 어떻게 submitted된 것을 보낼 수 있는지 알아보자.

</aside>

How to add submit event listener?

일반적으로 submit 형식을 만들고 싶다면, button에 type="submit"이라는 속성을 만들었을 것이다. 만약에 이 버튼에 onSubmit과 같은 속성을 주는 방식으로 하게 된다면, 상위에 있는 form 태그에 의해 제대로 작동 하지 않게 된다. 그렇기 때문에 아래와 같이 form태그에 onSubmit={submitHandler}을 붙여주기로 하자!

<form onSubmit={submitHandler}>
	<input type="submit">
</form>

submit event의 문제???(새로고침의 문제)

submit버튼을 누르게 되면 default로 페이지가 새로고침이 되게 된다. 그럴때는 아래와 같이 핸들러 함수에서 이벤트의 디폴트값을 없애주면 된다.

const submitHandler = (event) => {
event.preventDefault();
}

<form onSubmit={submitHandler}>
	<input type="submit">
</form>