더 나은 SPA를 위해 <Link>를 사용해보자

우클릭 시에 다음의 사진처럼 '새 탭에서 이미지 열기'가 되는 부분들이 있다.
새 탭애서 이미지를 열 수 있다면 원하는 리스트들을 쭉 늘어놓고 하나씩 비교할 수 있어 좋다.

Next.js에서 SPA를 router.push를 통해 사용을 했으나
새 탭에서 링크 열기를 위해 <Link>를 사용하는 것으로 결정하였다.

router.push가 사용하기는 편하지만 <Link>를 통해 생성되는 a태그가 SEO 최적화에 도움을 주는 것을 알게 되었고 간단한 SPA가 아니라면 <Link> 태그를 사용해야겠다고 느꼈다.

Goal

새 탭에서 열기 기능을 추가하기 위하여 <Link> 태그 사용하기

Problem

Router.push가 새 탭에서 열기를 지원해주지 않아 방법을 찾아야했다.

Solve

기존의 Router.push로 이루어진 함수를 전역변수와 조건부렌더링으로 분해하였고 조건부렌더링을 통해서 <Link>의 href 값을 다르게 주었다. 새로운 기능을 추가하는 과정에서 전체 코드 분량의 10%를 감축시킴으로써 앞으로의 유지보수를 보다 용이하게 할 수 있게 되었다.