const Home: NextPage = () => {
return (
<>
<header className={styles.ly_header}>
<div className={styles.ly_header_inner}>
{/* 레이아웃 안에 로고, 검색 버튼 배치*/}
<Link href="/">
<a className={styles.el_logo}>
<Image
src="http://placeimg.com/100/36/any"
alt="logo"
width={100}
height={36}
/>
</a>
</Link>
</div>
{/* /.ly_header_inner */}
</header>
JavaScript
복사
Link 컴포넌트는 DOM을 가지지 않지만 a태그를 클릭할 때 클라이언트 측 네비게이션을 실행해서 페이지 전체를 불러오지 않고 주소 이동을 할 수 있다.
Link 컴포넌트를 사용하여 주소를 이동하면 브라우저 history API를 지원함으로써 뒤로가기할 때 이전 페이지를 가져오게 된다.
Link 컴포넌트 안에 a 태그는 왜 넣어야되나? 기본적인 라우팅 기능을 수행되긴 하지만 웹 접근성, SEO에 안 좋기 때문에 넣어야 된다.
Link의 속성은 아래와 같다.
•
href: string 값으로 이동할 경로 또는 URL 입니다.
•
as? : string 값으로 브라우저의 URL에 표시될 값입니다. Next 버전 9.5.3 이전에 동적 라우팅을 위하여 사용됩니다.
•
replace?: boolean 값으로 브라우저의 history 스택에 url을 추가하지 않고 현재 상태를 변경합니다.
•
scroll?: boolean 값으로 스크롤을 맨 위로 이동할지 설정하는 값입니다. 기본값은 true 입니다.
•
shallow?: boolean 값으로 서버에서 데이터를 불러오는 작업을 스킵 할 때 사용합니다. 기본값은 false 입니다.
•
passHref?: boolean 값으로 자식에게 href를 전달하게 됩니다. 리액트 컴포넌트에 href를 전달할 때 사용합니다.
•
prefetch?: boolean 값으로 백그라운드에서 페이지를 미리 가져오게 됩니다. 브라우저의 화면의 Link 컴포넌트의 페이지들을 미리 가져오게 되며 기본값은 true 입니다.
