[Next.js] form enter키 클릭 시에 새로고침 막기

🐥 form enter키 클릭 시에 새로고침 막는 방법

안녕하세요. 오늘은 form 내에서 enter키를 눌렀을 때 자동으로 새로고침이 되지 않게 하는 방법에 대해서 알아보겠습니다.

---

👉form이란?

form은 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용하는 태그입니다.

- form 내에 type이 text인 input이 한 개만 존재할 경우: 해당 input에 포커스 된 상태로 enter를 누를 경우 submit 가능

- form 내에 type이 text인 input이 여러 개 존재할 경우: enter를 눌러도 submit 불가능

 

form의 경우에는 submit이 될 때 자동으로 새로고침 되는 것이 기본 동작입니다.

그렇다면 저희는 이 기본 동작을 막아야 새로고침이 불가능하게 만들 수 있습니다.

1. Event.preventDefault() 사용하기

Event.preventDefault()를 사용하면 기본 동작을 실행하지 않도록 방지할 수 있습니다.

const onClickEnter = (e: any) => {
  e.preventDefault();
  onClickSendBtn();
};

return (
  <>
    <form onSubmit={onClickEnter}>
      <div>
        <input ref={sendRef} onChange={onChangeSend} type="text" />
        <div>
          <input type="button" value="&rarr;" onClick={onClickSendBtn} />
        </div>
      </div>
    </form>
    ...
  </>
);

위 코드와 같이 onSubmit을 할 때 e.preventDefault를 넣어주면 새로고침이 되지 않습니다.

2. useForm의 handlesubmit 사용하기

useForm의 handlesubmit을 사용하면 e.preventDefault()를 추가하지 않아도 자동으로 새로고침이 되지 않습니다.

<form
  onSubmit={handleSubmit(onValid)}
>
  <input
    type="text"
    {...register("message", { required: true })}
  />
  <div>
    <button>
      &rarr;
    </button>
  </div>
</form>

 

위 방식을 이용하면 form을 새로고침 없이 submit할 수 있게 됩니다!!

---

✨결과물