[React] form 태그, event.preventDefault

<form>태그

웹 페이지에서의 입력 양식이다. 

<form
    name="폼 태그 이름
    action="데이터를 보낼 주소"
    method="데이터 전송 방식"
    onSubmit="데이터 유효성 점검, return false시 진행 중단"
    ...
>

...

</form>

 

 

event.preventDefault

a태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침된다. 따라서 페이지가 reloading되는 것을 방지해준다.

 

다음은 event.preventDefault 작성 예시이다.

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

return (
    <div>
      <h1>Movie List</h1>
      <form onSubmit={onSubmit}>
        <input
          placeholder="영화 제목"
          value={movieTitle}
          type="text"
          onChange={e=>setMovieTitle(e.target.value)}
        /><br/>
        ...
        <button type="submit">SUBMIT</button>
      </form>      
      ...
    </div>

submit 버튼을 누르더라도 페이지는 새로고침되지 않는다. 하지만 submit은 작동되어 Movie List에 새로운 영화가 추가 된다.