<엔터가 눌렸을 때, 타이틀 수정하기>에서의 문제와 해결, 리팩토링

[yejineee]

🧐 문제 : 타이틀 수정 후, 엔터 클릭 시 화면이 refresh되어 이벤트 핸들링을 할 수 없다.

엔터키로 타이틀을 수정하기 위해 keyup.enter 이벤트를 받았다,
그러나, 엔터를 클릭하면 페이지가 refresh되어서 이벤트 핸들링을 할 수 없었다.

검색을 통해 알게된 건, form 태그에서 엔터를 누르면 submit 이벤트가 발생하게 되는데, 이때 리프레쉬가 일어난다는 것이다.

submit 이벤트는

• 유저가 submit button (<button> or <input type="submit">) 을 누르는 경우
• enter버튼을 클릭하는 경우

발생한다고 한다.

따라서, submit이벤트 발생시 이벤트 취소하여 리프레쉬를 막고자 하였다.
이를 위해 submit 이벤트 발생시, preventDefault()를 호출하도록 하였다.

    <form v-if="showEditForm" @submit.prevent>
      <input
        id="column__title-edit-form"
        v-model="updatedTitle"
        :minlength="minTitle"
        :maxlength="maxTitle"
        @keyup.enter="submitUpdatedTitle"
      />
      {{ status }}
    </form>

⭐️ 리팩토링: submit 이벤트를 사용하여 타이틀 수정 핸들링하기

애초에 <form>태그를 쓰는 이유가 semantically correct하다는 것과 submit이라는 메소드를 사용하기 위함이었다.
keydown 이벤트를 잡아서 엔터를 눌렀을 때, submit하게 할 수도 있으나, form태그를 쓰면 submit이라는 의미있는 이름의 이벤트를 잡을 수 있는 것이다.

따라서, keyup이벤트를 잡지 않고, submit이라는 이벤트에 타이틀을 수정하는 핸들러를 추가하였다.
페이지 리프레쉬를 막기위해 preventDefault는 그대로 두었다.

    <form v-if="showEditForm" @submit.prevent="submitUpdatedTitle">
      <input
        id="column__title-edit-form"
        v-model="updatedTitle"
        :minlength="minTitle"
        :maxlength="maxTitle"
      />
      {{ status }}
    </form>

https://stackoverflow.com/questions/31066693/what-is-the-purpose-of-the-html-form-tag