React에서 a태그 링크 막는 방법

Posted by , January 09, 2023
ReactJS
Series ofReactJS

thumbnail

React 개발을 하다가...

이번에 사전 과제를 하다가 a 태그를 쓰는데 이 태그는 알다시피 href 때문에 페이지 이동이 일어난다.
그래서 그냥 클릭했을 때 이벤트만 받길 원했는데 방법을 찾아봤다.

찾아보기 보다는 그냥 떠오른 생각?

1. 그냥 div 등에 onClick 이벤트 처리

<div onClick={someFunc}></div>

위 코드 처럼도 처리할 수 있지만 마우스 커서가 갔을 때 클릭 가능함을 표시하고 싶었다.
물론 깊게 들어가면 또 할 수 있지만 간단히 처리하는 법이 필요했다.

2. a태그에 처리하기

<a href="#" onClick={e => e.preventDefault}>
  {item.title}
</a>

위와 같이 작성하면 내가 원하는 방식으로 동작한다.
단 href에 구석기 시대에 쓰던 방식으로 쓰면 리엑트에서 쓰지 말라 한다.

href="javascript:void(0)"