[리액트/Next.js] Router.push vs Link
#상황
개인 프로젝트를 진행하면서 시작하기, 수정 버튼에 페이지이동이 필요해졌다.
앵귤러를 사용했을때도 아무생각 없이 코드를 만들었다가 리랜더링이 되서 SPA에 맞지 않았다는것을 알고 다시 수정한적이 있었는데
리액트에서 어떤게 올바른 사용법인지 궁금해졌고 검색해보았다.
#설명
https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag
Next.JS "Link" vs "router.push()" vs "a" tag
Newbie here, sorry if this is extremely basic question but I'm not able to wrap my head around which technique should be followed to navigate across various pages. As of now I know three different
stackoverflow.com
1. 먼저 나는 Next.js를 사용하고 있다. 내 프로젝트는 이상형월드컵으로 기본적으로 인터넷 검색이 잘 되서 상단에 노출시켜야 한다. 하지만 단순히 Router.push를 사용한다면 링크가 크롤러에 감지되지 않아 맞게 사용하는 방법이 아니다. 만약 여러 작업이 수행되고 그 결과에 따라 페이지 이동을 해야할때 Router.push를 사용하고 단순 페이지 이동으로는 사용하면 안된다고 한다.
2. Link는 크롤러에 감지가 되며 페이지를 다시 로드하지않고 계속 탐색하여 단일 페이지 앱으로 만들어준다.
#Link 알맞는 사용 방법
https://f-dever-error-log.tistory.com/56
[NextJS] Link 태그와 href의 관계
git에서 더 편하게 보기 https://github.com/uu29/TIL/blob/main/%5BNextJS%5D%20Link%20%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%8B%E1%85%AA%20href%E1%84%8B%E1%85%B4%20%E1%84%80%E1%85%AA%E1%86%AB%E1%84..
f-dever-error-log.tistory.com
나는 styled-component를 사용하고 있다. 지금까지 passhref속성을 사용하고 있지 않았는데 이 블로그 글을 보고 사용해야겠다고 생각했다. Link를 크롤러에 노출시키려면 Link가 만든 a태그에 href가 들어가야 하는데 passhref속성을 사용하지 않을시 href가 들어가지 않는 모습을 확인할 수 있다.
#문제발생
새로운 문제가 직면했다 Link를 사용하면 자동적으로 a태그가 만들어지고 라우터이동이 가능해진다 하지만 나는 그렇지 않는다 왜일까?
https://uchanlee.dev/nextjs/Why-using-a-tag-in-nextjs-Link/
Next.js Link 태그안에 a tag를 안넣어도 왜 잘 작동될까?
Next.js Link의 작동원리에 대해 궁금했던 점을 기록했습니다.
uchanlee.dev
나의 코드로 Link안에 button이 들어가 있다. 기본적으로 Link안에 a태그나 빈글자를 사용하면 자동적으로 a태그를 만들어주지만 span, button등 다른것을 사용하면 a태그가 만들어지지 않고 onClick으로 라우터기능만 작동하게 된다는 것을 알 수 있다.
문제는 나는 버튼을 사용하고 있다는것이고 a태그가 아닐시 SEO등 위에서 말한 장점을 잃게 된다. 따라서 코드를 다시 바꿔줘야겠다.