utterances-bot commented 3 years ago

Next.js Link 태그안에 a tag를 안넣어도 왜 잘 작동될까? | uchanlee.dev

Next.js Link의 작동원리에 대해 궁금했던 점을 기록했습니다.

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

FromGoodEnoughYounGyeom commented 3 years ago

와 저도 next.js 사용하면서 a태그를 안넣어도 link가 되는게 왜그럴까 했는데 !! 이렇게까지 여러가지 예시로 정리해주셔서 감사합니다. 많이 배우고 이해하고 갑니다!

woochanleee commented 3 years ago

도움이 됐다니 기쁘네요!😊

feel0321 commented 3 years ago

저도 이 부분이 궁금했습니다. '그냥 리액트에서 개선한거니까 뭐 리액트문법처럼 Link써도 되겠지 결과도 같은데' 하고 넘어가려다가 혹시 몰라 검색해보고 들어왔습니다. 호기심을 그냥 넘어가지 않고 라이브러리까지 다 뜯어보시다니 저도 이런 자세를 배워야할 것 같습니다.

next js의 Link는 string만 적을경우 a태그를 추가해준다는건데 개발자가 a태그를 사용하는것이 연산을 한줄이라도 줄이는것같아서 a태그를 써야겠네요.

좋은글 감사합니다.

woochanleee commented 3 years ago

저도 이 부분이 궁금했습니다. '그냥 리액트에서 개선한거니까 뭐 리액트문법처럼 Link써도 되겠지 결과도 같은데' 하고 넘어가려다가 혹시 몰라 검색해보고 들어왔습니다. 호기심을 그냥 넘어가지 않고 라이브러리까지 다 뜯어보시다니 저도 이런 자세를 배워야할 것 같습니다.

next js의 Link는 string만 적을경우 a태그를 추가해준다는건데 개발자가 a태그를 사용하는것이 연산을 한줄이라도 줄이는것같아서 a태그를 써야겠네요.

좋은글 감사합니다.

읽어주셔서 감사합니다!

kim-taewoo commented 3 years ago

이 부분 궁금해서 찾아보고 있었는데 같은 고민하신 분이 역시 있었군요. 그런데 결론이 약간 애매합니다 ㅠㅠ 결국 알아서 래핑해준다면 굳이 a 태그를 안 넣어줘도 되는 거 아닌가 싶은데.. 가독성 측면에서 굳이 a 태그 없는 게 깔끔하기도 하고요. a 태그를 포함한 복잡한 커스텀 컴포넌트를 사용해서 passHref 를 적용하는 그런 케이스가 아니라 단순 string 링크라면 a 태그를 안 넣는 게 낫지 않을까 싶은데 왜 공식 문서에서는 굳이 a 태그들을 넣어놨는지.. 혼란스럽네요

woochanleee commented 3 years ago

이 부분 궁금해서 찾아보고 있었는데 같은 고민하신 분이 역시 있었군요. 그런데 결론이 약간 애매합니다 ㅠㅠ 결국 알아서 래핑해준다면 굳이 a 태그를 안 넣어줘도 되는 거 아닌가 싶은데.. 가독성 측면에서 굳이 a 태그 없는 게 깔끔하기도 하고요. a 태그를 포함한 복잡한 커스텀 컴포넌트를 사용해서 passHref 를 적용하는 그런 케이스가 아니라 단순 string 링크라면 a 태그를 안 넣는 게 낫지 않을까 싶은데 왜 공식 문서에서는 굳이 a 태그들을 넣어놨는지.. 혼란스럽네요

본문에 첨부되어있는 링크인데 https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L226 확인해보시면 아래 내용의 주석이 있는데요,

Deprecated. Warning shown by propType check. If the children provided is a string (example) we wrap it in an tag

공식적으로 deprecated 명시함으로써 권장하지 않는다면 나중 버전에서 문자열만 줬을 경우 자동 a 태그로 감싸주는 "안전 코드?"가 사라질 수 도 있을것 같아요. 따라서 Next에서 바라는 next/link 컴포넌트의 사용 방식은 a 태그를 명시적으로 작성 해주는것 같다는 개인적인 의견입니다!

kim-taewoo commented 3 years ago