type="button"의 필요성

반려견을 눌러선 안된다

 

개요

 

프로젝트를 진행 중 새로운 입력 필드 추가 버튼을 통해 input을 새롭게 생성하는 form요소를 구현중에 아래와 같은 문제가 발생했다.

 

 

새로운 요소를 생성하기 위해 Add 버튼을 클릭 시, 가장 최상단으로 계속 이동하는 상황

 

혹여나 클릭에 window객체를 건드리거나, 뷰포트를 조정하는 로직이 있나 했지만 없었다.

 

코드에서 간단하고, 치명적인 문제가 있었다.

 

<div className="relative flex size-full flex-row justify-end gap-2">
  <button
    onClick={() => appendIsbn({ value: 0 })}
    className="text-sm font-semibold text-[var(--sub-color)]"
  >
    + Add
  </button>
</div>;

 

form내부에서 button의 type을 지정하지 않고 기본 default값으로 사용했기에 오류가 발생했다.

 

 

button 태그의 type

 

button의 default type은 button인 줄 알았으나 'submit' type을 가지고 있다.

 

보통 type을 명시하지 않아도 큰 문제가 생기지 않아, 명시하지 않고 사용하는 경우가 빈번한데 type의 종류엔 어떤 것들이 있고, 명시하지 않았을 때 생길 수 있는 위와 같은 의도치 않은 동작을 알아보자

 

type의 종류

타입	설명
submit	form을 제출한다, <form>태그 안에서의 기본 값
reset	form을 초기화 한다.
button	아무런 기본 동작이 없으며, js로 제어를 원할 때 사용

 

이제껏, 나는 큰 문제를 못느꼈다고 생각한다면, form태그 내부가 아닌 다른 곳에서 사용했을 경우가 많다.

 

 

문제

 

1. form내부에서 버튼에 의해 submit이 발생한다면,  form에 지정한, onSubmit 핸들러가 실행된다.

- 이 경우엔 사용자가 의도한 동작이기에 큰 문제는 없으나, type을 지정하지 않아, 발생하는 onSubmit의 경우엔, 미완된 form을 전송하거나, 데이터가 누락된 채로 전송되는 문제가 발생할 수 있다.

- 위에서 보여준 스크롤 초기화도 이에 해당하는 문제라고 볼 수 있다.

 

2. onSubmit을 지정하지 않고 submit이 발생한 경우

- 기본 동작으로 페이지 전체가 새로고침된다. 또는, 내가 button에 onClick 이벤트 함수를 지정한 경우, 해당 함수보다, 페이지 전체가 새로고침되어, 원치않는 리렌더링에 의해 의도치 않은 동작이 발생할 수 있다.

 

 

해결

 

본질적인 해결법은 간단하다 적절한 type을 button태그 마다 명시해주면 된다.

 

하지만, 사람의 습관은 크게 안바뀌듯이, 누군가 말해주거나 스스로 되뇌일 필요가 있다.

 

1. react/button-has-type 규칙 활용

- 타입 미지정 시 경고를 주게된다.

 

2. 공용 컴포넌트로 버튼 지정시, type을 입력받는 props 넣기

- 해당 props를 통해 버튼 컴포넌트를 사용할 때, 의도에 맞는 type지정을 까먹지 않고 지정이 가능하다.

 

 

참고

https://nykim.work/96

버튼에 타입을 쓰는 이유 (button type="button")