[리액트/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

1. 먼저 나는 Next.js를 사용하고 있다. 내 프로젝트는 이상형월드컵으로 기본적으로 인터넷 검색이 잘 되서 상단에 노출시켜야 한다. 하지만 단순히 Router.push를 사용한다면 링크가 크롤러에 감지되지 않아 맞게 사용하는 방법이 아니다. 만약 여러 작업이 수행되고 그 결과에 따라 페이지 이동을 해야할때 Router.push를 사용하고 단순 페이지 이동으로는 사용하면 안된다고 한다.

 

2. Link는 크롤러에 감지가 되며 페이지를 다시 로드하지않고 계속 탐색하여 단일 페이지 앱으로 만들어준다.

 

#Link 알맞는 사용 방법

https://f-dever-error-log.tistory.com/56

[NextJS] Link 태그와 href의 관계

나는 styled-component를 사용하고 있다. 지금까지 passhref속성을 사용하고 있지 않았는데 이 블로그 글을 보고 사용해야겠다고 생각했다. Link를 크롤러에 노출시키려면 Link가 만든 a태그에 href가 들어가야 하는데 passhref속성을 사용하지 않을시 href가 들어가지 않는 모습을 확인할 수 있다.

 

#문제발생

분명히 Link에 passhref 사용하여 a태그와 그 안에 href가 떠야하는데 뜨지 않는다

새로운 문제가 직면했다 Link를 사용하면 자동적으로 a태그가 만들어지고 라우터이동이 가능해진다 하지만 나는 그렇지 않는다 왜일까?

문제의 코드

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

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

나의 코드로 Link안에 button이 들어가 있다. 기본적으로 Link안에 a태그나 빈글자를 사용하면 자동적으로 a태그를 만들어주지만 span, button등 다른것을 사용하면 a태그가 만들어지지 않고 onClick으로 라우터기능만 작동하게 된다는 것을 알 수 있다.

문제는 나는 버튼을 사용하고 있다는것이고 a태그가 아닐시 SEO등 위에서 말한 장점을 잃게 된다. 따라서 코드를 다시 바꿔줘야겠다.