next.js의 Link 태그내부에 반드시 a태그를 사용해야할까?

 

next.js를 공부하던 중에, Link태그 내에 a태그를 사용하고 href 속성을 넣지 않으니,

접근성 린터에서 a태그인데 href속성이 없다고 에러를 띄웠다.

그래서 문득 생각이 들었는데, "Link 태그 내부에 a 태그를 쓰지 않아도 정상적으로 동작하는데 반드시 넣어야할까?"

그래서 그 이유를 찾아보기 시작했다.

 

역시 나보다 먼저 이런 고민을 하신분도 계신다.

https://uchanlee.dev/nextjs/Why-using-a-tag-in-nextjs-Link/

 

이 글에 따르면

https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx

여기에 226라인에 보면, Link태그의 children이 string이면 a태그를 자동으로 붙여주고 있다.

 

그래서 a태그를 굳이 넣지 않아도 자동으로 a태그가 붙어서 상관이 없다.

 

그럼 children이 <span>처럼 string도 아닌 일반 태그라 해도 동작할까?

동작한다! 근데 a태그는 자동으로 감싸지지 않는다.

 

엥? 근데 왜 동작하는거지

 

이 부분도 궁금해서 코드를 뜯어봤다.

285라인을 보면, onClick을 바인딩해주고 있다.

근데 onClick의 type이 function인 경우에만 그런데, onClick이 아닌 경우에는 어떻게 바인딩되는지 모르겠다.

내가 모르는 또다른 동작이 있는 것 같다.

 

그럼 Link태그 안에 a태그가 href를 가지고 있다면 어떨까?

테스트를 해보니, Link태그의 href가 반영되었다.

어쩌면 당연한 결과이다.