프론트앤드 React <a>태그 사용시 나타나는 오류 해결하기

 

 

 

 

 

 

 

 

 

" React The href attribute requires a valid value to be accessible. "

 

 

 

What....t..h.. 프론트앤드 공부하다보면 영어의 소중함을 알게된다.. 하아..

어쨌든, 여기 찾아온 사람들은 아마 이 경고문을 보고 찾아왔겠지?

그럼 왜 이런 상태가 나타나고있는지 알아보자!

 

 

 

프론트앤드 개발자가 HTML을 짜다보면 하이퍼링크를 적용시킬 때 <a>태그를 많이 사용한다.

 

<a href="#">이런식이라던지</a>
<a href="javascript:;">이런식이라던지</a>
<a href="javascript:volid(0);">이런식이라던지</a>

 

이렇게 적용했을 때 React에서 터미널에서 나타나는 Warring을 발견했을 것이다.

왜냐, 나도 발견하고나서 공부를 했기 땜시롱이지.

 

 

 

 

 

 

 

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. 

 

<a>태그 사용 시 href 속성의 유효한 값이 필요하다는 의미이다.
이런 태그는 <strictMode>에서 걸리게 되는데 href 속성이 없어도 안되고 유효하지 않아도 문제가 된다.

 

 

 

 

 

 

 

 

그럼, 어떻게 해결해야하나요?

<a href="#!">해결방법 1</a>
<a href="{() => false}">해결방법 2</a>

 

둘 중 하나를 넣어보면 경고글이 사라지는 것을 확인 할 수 있다.

아주 간단하죠?!