반응형
반응형
소스 코드 보러가기 👉🏻 https://github.com/gitchan-Study/2023-next-js-beginner
💋 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>
);
};
도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!
반응형
'NextJS' 카테고리의 다른 글
[NextJS] 이미지 넣기 가장 쉬운 방법: public 디렉토리 활용 (0) | 2024.01.02 |
---|---|
[NextJS] 페이지 제목 설정: NextJS에서 HTML Head Title 태그를 쉽게 설정하는 방법 (0) | 2023.12.22 |
[NextJS] 다양한 Style 적용법: module.css, 1개의 컴포넌트에 2개 이상의 className 설정하는 방법, styles JSX (0) | 2023.12.21 |
[NexJS] 모든 페이지에 대한 공통 레이아웃과 스타일을 설정해보자! (feat. _app.js) (0) | 2023.12.18 |
[NextJS] Next JS 프로젝트 생성 및 실행 방법 (0) | 2023.12.15 |