button 태그는 새 탭에서 열 수 없다

이전에 작성했던 기억이.. 문득 들어서 찾아봤다 ㅋㅋ 진짜 있네 ^^

https://memoryelim.tistory.com/180

HTML - a 태그와 button 태그

 

새로이 알게 된 부분이 있어 추가로 작성해본다.

 

페이지 이동을 할때 a 태그를 이용할지, button 태그를 이용할지 고민하게 된다.

때로는 고민없이 외관만 보고 버튼처럼 생겼네? -> 버튼 태그 이런 식으로 적용하기도 한다..

 

리액트에서는 useRouter를 사용해서 페이지 이동을 시킬 수 있기 때문에 

버튼 태그 onClick 핸들러로 router.push 등으로 페이지 이동하도록 구현하면

=> 제목에 쓴 것과 같이, 우버튼 클릭해서 새탭 열기가 불가능하다는 사실 !! 정말 신기하다.

 

이 포스팅을 쓰는데 눈에 띄인 티스토리 편집기의 버튼 두 개!

우 클릭 해보면?  나타나는 메뉴가 다른 것을 볼 수 있다. 

 

임시 저장 버튼 우클릭

완료 버튼 우클릭

개발자 도구에서 확인해보면 임시저장 버튼은 a 태그, 완료 버튼은 button 태그이다.

완료 버튼은 POST 요청을 보내야하니까 버튼 태그를 쓴것같은데, 임시 저장 버튼은 왜 a 태그를 썼을까? 

임시저장 옆에 있는 숫자를 누르면 지금까지 임시저장한 문서 목록을 보여준다. -> 페이지 이동? 의 개념인걸까..

하지만 임시저장 숫자가 아닌 쪽을 누르면 네트워크 요청을 보내는걸 볼수있는데 음.. 잘은 모르겠다 ^^ㅎ.. 

 

아무튼 역할에 따라 태그를 사용하는 것은 중요하다.

 

또 하나, 마우스의 휠로 링크 요소(a 태그)를 클릭하면 새 탭에서 열 수 있다.

하지만 버튼은 클릭해도 아무 동작이 일어나지 않는다.

 

그리고 링크 연결할때 a 태그를 쓰는게 중요한 또 하나의 이유는 SEO이다.

검색엔진 봇이 웹 크롤링을 할때 같은 링크로 연결하는 역할을 하더라도,  a 태그의 역할은 명확한 반면 button의 역할은 알 수 없다.

 

앞으로는 개발할 때 역할을 고려한 태그 사용을 해야겠다!