[React][Next.js] <Link></Link>를 통한 라우터 기능 - <Link> 내부에 <a> 태그를 넣는 이유

사용 방법

---

import Link from 'next/link'

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

export default Home

Next.js에서 라우터 기능은 다음과 같이 사용합니다.

 

<a href="/about">...</a> 형식을 사용하지 않는 이유

---

React는 SPA(Single Page Application)구조를 가지고 있어 하나의 페이지에서 모든 행위들이 일어나야하는데

<a href="/about">About us</a> 형식을 사용하게 되면 새로고침(페이지 이동)을 하기 때문입니다.

 

<Link> 내부에 <a> 태그를 넣는 이유

---

<Link href="/about">
	About
</Link>

 

위와 같이 <a>태그를 넣지 않아도 넣은 것과 외관상 차이가 없으며 기능도 정상적으로 동작하는 것을 확인할 수 있습니다.

 

 

<Link href="/about" className="about">
	About
</Link>

그러나 위와 같이 <Link> 태그 내부에 class 요소를 추가하여 HTML를 랜더링하면 class 요소가 추가되지 않고

'<a href="/about>About</a>'로 변환되는 것을 확인할 수 있습니다.

 

<Link href="/about">
        <a className="about">About Us</a>
</Link>

따라서 id, class, style 등 HTML 요소를 추가하기 위해서는 반드시 <a> 태그 내에 요소를 작성해야 정상적으로 추가할 수 있습니다.

위와 같은 소스를 HTML로 랜더링하게 되면 '<a href="/about" class="about">About</a>'로 변환되는 것을 확인할 수 있습니다.

 

 

참고

https://nextjs.org/docs/messages/no-html-link-for-pages

no-html-link-for-pages | Next.js