form 태그에서 preventDefault() 사용하는 이유

form 태그 간단하게 살펴보기

 

<form>은 사용자로부터 값을 입력받는 양식을 만들기 위해 사용한다. 아래 태그 중 필요한 것들을 선택하여 조합이 가능하다.

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroupt>
• <fieldset>
• <label>
• <output>

 

---

 

submit 이벤트 기초동작 제거

 

사용자의 입력을 가져오기 위해서 간단하게 로그인, 회원가입에 사용될 수 있는 컴포넌트를 만들었다.

const signForm = () => {
  const [userInfo, setUserInfo] = useState({
    email: '',
    password: '',
  });

  const handleChange = ({ target }) => {
    setUserInfo((prev) => ({ ...prev, [target.name]: target.value }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      // 서버와 통신하는 코드
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">이메일</label>
        <input
          name="email"
          type="email"
          value={userInfo.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">패스워드</label>
        <input
          name="password"
          type="password"
          value={userInfo.password}
          onChange={handleChange}
        />
      </div>
      <div>
        <button type="submit" />
      </div>
    </form>
  );
};

 

만약 handlerSubmit 함수에 event.preventDefault()  메서드를 입력하지 않는다면 의도했던 통신이 제대로 이루어지지 않음을 확인할 수 있다. 아래 MDN에서 정의한 Event.preventDefault()  정의를 살펴보자

 

"Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본동작을 실행하지 않도록 지정한다"

 

해당 정의를 통해서 preventDefault() 메서드를 사용하여 의도하지 않은 '기본동작' 때문에  통신이 제대로 이루어지지 않음을 눈치챌 수 있다. 없애고자 하는 기본동작은 바로 submit 이벤트로 양식을 제출하는 고유 동작으로 페이지 이동, 새로고침이 발생한다는 특징이 있다. 이때 preventDefault() 메서드를 사용하여 우리가 의도한 fetch를 진행할 수 있다.

 

---