[노마드코더] form태그에서 submit 사용시 preventDefault 사용이유

노마드코더 리액트 강의를 듣다가

 

input을 만들어 주는데 input을 form으로 감쌋다

 

근데 이부분을 찾아보니

 

 

 

form 태그를 쓰는이유

html태그로, 사용자로부터 정보를 받아올 수 있는 다양한 기능을 제공한다.

로그인, 회원가입 등 사용자가 입력한 정보를 서버로 전달할 필요가 있을 때 사용

<form id="login-form">
  <input
    type="text"
    placeholder="write here" />
  <button>Log in</button>
</form>

이와같이 input태그를 통해 간단한 유효성 검사를 할수 있다.

 

form에서 submit을 쓸경우

submit의 특징은, 발생시 페이지가 자동 새로고침 된다는 것이다.

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = event => setToDo(event.target.value);
  console.log(toDo);


  return (
    <div>
      <form> 
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default App;

위의 코드에서 submit을 쓰지 않았지만

form이 submit이라는 이벤트를 갖고 있다는 JS특성때문에 자동 새로고침이 되는 현상이 발생한다.

 

그래서 사용자가 입력한 정보를 받아오기 위해서는 새로고침을 방지할 필요가 있다!!!

이때 사용되는 것이 preventDefault()이다.

이벤트가 실행될때 기본 탑재된 기능을 방지해주는 역할이라고 보면 된다.

 

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = event => setToDo(event.target.value);
  const onSubmit = event => {
    event.preventDefault();
    console.log(toDo);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default App;

 

이렇게 추가하니 새로고침이 발생하지 않고 잘 됬다 !!