event.preventDefault()를 활용한 이벤트 취소 방법

기본적으로 form에서 onSubmit()을 통해 submit 하면 이벤트 완료 후 refresh가 됩니다. 하지만 리액트로 만드는 SPA앱에서는 원하는 이벤트가 아니죠. 그래서 event.preventDefault() 를 활용하여 추가로 이벤트를 전파하지 않고 취소할 수 있습니다.

기본적으로 리액트 코드에서 curly braces {...} 내부의 내용은 Javascript로 인식되어 render() 함수가 작동하면 실행되기 마련입니다.

<form onSubmit={console.log("렌더되는 순간 실행될꺼다!막아보시지!하하핫")}></form>

form에서의 코드는 아래와 같습니다:

logMessageOnConsole() {
console.log("폼 서브밋을 하는 순간 브라우저 리프레쉬시시시시");
}
render() {
return(
<form onSubmit={this.logMessageOnConsole}>
...
<button type="submit">제출</button>
</form>
);
}

위의 코드에서 Submit 버튼을 누르게 되면 logMessageOnConsole이 실행되고 refresh되죠. 그래서 이를 막기 위해 두가지 방법이 있습니다.

방법 1

handleSubmit(e) {
e.preventDefault(); // 기본적인 서브밋 행동을 취소합니다

// Submit후 하고싶은 것을 적어주세요!

}
render() {
return(
<form onSubmit={this.handleSubmit}>
......
</form>
);
}

이벤트 핸들러에는 확실히 함수를 넘겨줘야죠. 이벤트가 발생하면 실행될꺼에요.

방법 2

render() {
return(
<form onSubmit={(e) => {e.preventDefault(); /* Submit후 하고싶은 것을 적어주세요!*/}}>
......
</form>
)
}

사실상 같은 로직이지만 arrow function을 사용하여 라인 내부에 넣어줘도 됩니다.