[NextJS] 새로고침 없이 페이지 전환되는 Client-Side 네비게이션 구현하기 (feat. Pages와 Link 태그)

반응형

 

소스 코드 보러가기 👉🏻 https://github.com/gitchan-Study/2023-next-js-beginner

GitHub - gitchan-Study/2023-next-js-beginner: 노마드코더 [NextJS 시작하기] 학습 코드

 

💋 Pages

React를 사용한다면, React Router DOM 설치, router 생성, routes 설계, import components, render routers를 해야 하는데, Next JS를 사용하면 간단하게 정해진 디렉토리에 만든 파일의 이름에 따라서 Pages가 생성된다.

 

• pages 디렉토리 아래에 있는 파일 이름에 따라서 route가 결정된다.
• URL의 이름은 파일 이름이 된다. (Component 이름은 관련 없음)
• pages/about.js ⇒ localhost:3000/about에서 확인 가능
• 다만, index.js는 앱이 시작하는 파일이기 때문에, / 에서 확인 가능

 

• Node JS를 사용하면, 별도로 react를 import할 필요가 없다.
• 다만 useState,useEffect, lifecycle method를 사용하는 경우에는 꼭 import react from "react”를 통해 명시적으로 import해야 한다.

 

 

💋  <a> vs <Link>

네비게이션 바를 만들 때, 아래와 같이 <a> 태그를 사용해서 만들게 되면, 페이지 간 이동할 때 새로고침이 일어나게 된다.

⇒ single-page app 경험을 제공하지 못한다! = 느리다.

 

NavBar.js

export default function NavBar() {
	return (
		<nav>
			<a href="/">Home</a>
			<a href="/about">About</a>
		</nav>
	);
};

 

Link 컴포넌트는 애플리케이션에 Client Side 네비게이션을 제공해준다.

⇒ 페이지 이동 시 웹사이트를 새로고침하지 않아도 된다. = 빠르다.

 

NavBar.js

import Link from "next/link";

export default function NavBar() {
	return (
		<nav>
			<Link href="/">Home</Link>
			<Link href="/about">About</Link>
		</nav>
	);
};

 

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!