NextJS에서 링크 태그로 라우팅시키는 방법 <Link> (NextJS React 프로젝트 05)

 

 

이전 글에서 레이아웃 컴포넌트를 만들고 헤더와 푸터를 추가했습니다.

헤더에는 로고도 있고 메뉴바도 있죠.

보통 로고를 누르면 메인페이지로, 메뉴를 누르면 해당 메뉴로 페이지가 이동(라우팅) 됩니다.

 

원래 html에서는 a 태그로 사용하죠.

이와 달리 NextJS는 CSR과 SSR을 모두 지원하기 때문에,

자체 태그와 라우팅 함수를 만들었습니다.

 

오늘은 그 중에서 어떻게 a 태그대신 Link태그로 라우팅 할 수 있는지 살펴보겠습니다.

 

 

 

1. 링크 태그 <Link> 이용하기

 

이것은 현재 헤더의 모습입니다.

로고와 메뉴, 그리고 스타일까지 적절하게 적용되어있죠.

import styles from './Header.module.scss'

const Header = () => {
  return (
    <header className={styles.header}>
      <div className={styles.contents}>
        <div className={styles.logo_container}>
          Traffickr
        </div>

        <nav className={styles.navigation}>
          <ul>
            <li>
              서비스 소개
            </li>
            <li>
              로그인
            </li>
            <li>
              시작하기
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

export default Header

 

그런데 보통 로고는 메인페이지로 이동시키고,

메뉴는 각 메뉴에 맞는 링크로 이동시킵니다.

 

NextJS에서는 그것을 Link 태그로 구현할 수 있도록 만들었습니다.

next/link에서 Link를 import해서 사용하는 것이죠!

import Link from 'next/link'

 

이제 Link를 사용하여 헤더를 완성해보겠습니다

import styles from './Header.module.scss'
import Link from 'next/link'

const Header = () => {
  return (
    <header className={styles.header}>
      <div className={styles.contents}>
        <div className={styles.logo_container}>
          <Link href='/'>
            <a>Traffickr</a>
          </Link>
        </div>
        

        <nav className={styles.navigation}>
          <ul>
            <li>
              <Link href='/#about'>
                <a>서비스 소개</a>
              </Link>
            </li>
            <li>
              <Link href='/signin'>
                <a>로그인</a>
              </Link>
            </li>
            <li>
              <Link href='/signup'>
                <a>시작하기</a>
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

export default Header

 

이제 헤더를 클릭해보면 원하는 주소로 이동하는 것을 확인할 수 있습니다.

 

 

 

2. 링크 태그 <Link> 이해하기

링크 태그는 매우 간단합니다!

위에서 확인했듯이 href 속성에 원하는 상대 주소를 넣기만 하면 되죠

(과거 Next.js 버전 9.5.3 아래에서는 다이나믹 라우팅을 위해서는 as 속성도 필수적이었습니다)

 

링크 태그를 사용하면 내부의 컴포넌트를 전부 링크가 되도록 감싸줍니다.

그러나 한 가지 주의해야할 상황이 있습니다. 다음 코드를 잠깐 보시죠

...
const Header = () => {
  return (
    <header className={styles.header}>
      ...
      <li>
        <Link href='/#about'>
          <a>서비스 소개</a>
        </Link>
      </li>
      <li>
        <Link href='/signin'>
          <p>로그인</p>
        </Link>
      </li>
      ...
    </header>
  )
}
...

 

위 코드는 잠시 로그인 버튼에서 a 태그를 p 태그로 바꾸었을 때의 상황입니다.

그럼 html은 다음과 같이 렌더됩니다

 

 

<Link>태그 안에 p태그를 사용하니 아예 a 태그나 타겟 url이 보이지를 않죠.

이는 바로 nextJS의 Link 태그가 a 태그가 아닌 요소는 onClick에 바인딩시키고 있기 때문입니다!

(아무런 태그를 넣지 않은 문자열은 a 태그로 감싸주기도 합니다)

 

즉, 그냥 텍스트를 넣거나 a 태그를 이용하지 않는다면 

개발자도구에서 a 태그가 생기지 않습니다!

그렇게 때문에 SEO를 생각한다면 링크 태그를 사용할 때 문자열이나 a태그를 사용하시는 것이 좋습니다!