in Vanilla JavaScript
자바스크립트 form 태그의 데이터 전송을 막는 방법에는 아래와 같이 onsubmit 이벤트를 활용하는 것이 있다. onsubmit 이벤트는 input 태그의 데이터를 서버에 전송하기 전 동작을 지정하며, return false; 를 함으로써 이벤트 처리를 종료하고 action의 처리를 방지하게 된다.
<script>
const check = () => {
if (...) {
return false;
}
}
</script>
<form onsubmit="return check()" action="/send">
...
</form>위와 같은 코드를 사용하면 if 에 적절한 코드를 입력하여 form 태그의 데이터가 서버로 전송되는 것을 방지할 수 있다.
in React
리액트로 프로젝트를 구현하던 중, 특정 조건에서는 form 태그를 통해 서버에 데이터를 요청해야 할 일이 있었다. 바닐라 자바스크립트에서의 처리 방법을 적용하여 처리하려 하였으나, 리액트의 컴포넌트 return 문에서는 큰 따옴표를 이용한 onsubmit 이벤트를 사용할 수 없었고, 이 방법으로는 리액트에서 같은 기능을 구현하기 어렵다는 것을 깨달았다.
구글링으로 방법을 찾던 중, preventDefault() 메소드를 사용하면 비슷한 기능을 구현할 수 있다는 것을 알게되었다.
The preventDefault() method of the Event interface tells the user agent that if the
event does not get explicitly handled, its default action should not be taken as it
normally would be.
- from MDN Event.preventDefault() 문서한마디로 preventDefault() 메소드는 이벤트의 동작을 중단시킨다는 것이다. 이 메소드를 사용하여 리액트에서도 아래와 같이 특정 조건에서 form 태그의 데이터 전송을 방지할 수 있었다.
const Component = () => {
const stopEvent = (e) => {
if (...) {
e.preventDefault();
}
}
...
return (
<form onSubmit={stopEvent} action="/send">
...
</form>
);
};