<Link> 컴포넌트와 passHref

<Link> 컴포넌트

 

HTML 문서에서 기본적으로 사용되는 <a> 태그는 문서 전체를 재렌더링 하므로 SPA인 React와 Next.js 환경에서는 사용이 권장되지 않는다.

 

이에 router.push()를 사용하면 빌드 후 이동주소가 HTML 상에 표시되지않아 SEO(검색엔진 최적화)에 불리하다.

 

<Link> 태그를 활용하면 SEO에 유리한 a태그의 장점을 그대로 가져오면서 문서 전체가 재렌더링되는것을 방지할 수 있다.

 

 

 

import Link from "next/link";

 

next/link import후에 사용할 수 있으며 컴포넌트로 <Link></Link> 형태로 사용한다.

 

 

 

passHref

 

<Link> 컴포넌트를 사용할때 <Link> 컴포넌트 안에 있는 자식 컴포넌트(예: styled component)로 href속성을 강제 전달해준다. <Link>의 기능을 사용하고 디자인은 커스터마이징 하고싶을때 사용할 수 있다.