프론트엔드/React

[리액트/Next.js] Router.push vs Link

Sun0727 2022. 6. 13. 23:03

#상황



개인 프로젝트를 진행하면서 시작하기, 수정 버튼에 페이지이동이 필요해졌다. 

앵귤러를 사용했을때도 아무생각 없이 코드를 만들었다가 리랜더링이 되서 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에 passhref 사용하여 a태그와 그 안에 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등 위에서 말한 장점을 잃게 된다. 따라서 코드를 다시 바꿔줘야겠다.