<button>을 클릭했는데 쿼리스트링이 생기는 문제

진히·2023년 10월 13일
0

공부중🤓

목록 보기
15/17
post-custom-banner

문제

다음 버튼을 눌러야 컴포넌트가 전환되는데
Button을 클릭했을 때 쿼리스트링이 생기면서 컴포넌트가 전환되는 현상이 발생

원인

<form> 태그 안에 있는 <button>은 기본적으로 양식 제출의 기능, type="submit" 속성을 갖고 있기 때문입니다.
<form>에 method 속성값이 없거나 get일 경우 URL에 폼 데이터가 쿼리 문자열로 추가되고 페이지가 리로드 됩니다.

🎉해결

type="button" 속성을 부여하거나,
특정 조건 내에서 제출을 막고 싶은 경우라면 onClick 이벤트에 e.preventDfault();를 작성해 줍니다.

저의 경우 type을 지정해 해결했습니다.

profile
티모누나예요🐶

0개의 댓글