์ด๋ฒ ์๊ฐ์๋ Next JS ์ Dynamic Routing ์ ์ด์ฉํด์ ๊ฒ์ํ์ ๋ง๋ค์ด ๋ณผ ๊ฒ์ด๋ค.
์ด๋ฒ ๊ธ์์๋ ์ด๋ก ์ ์ธ ์ด์ผ๊ธฐ ๋ณด๋ค ์ข ๋ ์ค์ฉ์ ์ธ ์ด์ผ๊ธฐ๋ฅผ ํ๋ ค๊ณ ํ๋ค.
๋ง์ฝ ๋ค์ด๋๋ฏน ๋ผ์ฐํ ์ ๋ํด์ ์์ง ๋ชปํ๊ฑฐ๋ ํ๊ธ๋ก ์ ๋ฆฌ๋ ๊ธ์ ๋ณด๊ณ ์ถ๋ค๋ฉด ์ด๊ณณ์์ ํ์ธํ ์ ์์ผ๋ฉฐ Link ์ปดํฌ๋ํธ์ ๋ํด์๋ ์ด๊ณณ์ ์ ๋ฆฌ๋ฅผ ํด๋จ์ผ๋ ํ ๋ฒ ๊ฐ๋ณ๊ฒ ์ฝ๊ณ ์์ํ๋ ๊ฒ์ ์ถ์ฒํ๋ค.
์ด๋ฒ ์๊ฐ์๋ Dynamic Routing๊ณผ Link๋ฅผ ์ด์ฉํด์ ๊ฐ๋จํ ๊ฒ์ํ์ ๋ง๋ค์ด๋ณผ ๊ฒ์ด๋ค.
๊ฐ์ฅ ์ค์ํ ๋ชฉ์ ์ ๋ฐ๋ก Dynamic Routing๊ณผ Link ์ปดํฌ๋ํธ๋ฅผ ์ด์นํ๋ ๊ฒ ์ด๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ก๊ทธ์ธ์ด๋ Express, Node, DB์ ๊ฐ์ด ๊ณ ๊ธ ๊ธฐ์ ๊ทธ๋ฆฌ๊ณ ์ฌ์ด ๋์์ธ์ ์์๋ ํ๋๋ ์ฌ์ฉํ์ง ์๊ณ ๋ผ์ฐํ ์ ์ค์ ์ ์ผ๋ก ํ์ธํ ๊ฒ์ด๋ค.
Directory ๊ตฌ์กฐ
๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋ ๋ผ์ฐํ
์ ํ pages
๋๋ ํ ๋ฆฌ ์๋์ post/[id]
๋ผ๋ ๋๋ ํ ๋ฆฌ๋ฅผ ๋ง๋ค๊ณ ํด๋น ๋๋ ํ ๋ฆฌ์ comment
์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐ์ํฌ ๊ฒ์ด๋ค.
- pages : ๋ผ์ฐํ ์ ํ ํ์ผ์ ๋ชจ์๋๋ ๋๋ ํ ๋ฆฌ
- components : Navigation bar ์ญํ ์ ์ํํ
<Header>
์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ ๋๋ ํ ๋ฆฌ
File ๊ตฌ์กฐ
pages/index.jsx
=> localhost:3000/ ๊ณผ ๋งคํ๋ jsx ํ์ผpages/about.jsx
=> localhost:3000/about ๊ณผ ๋งคํ๋ jsx ํ์ผpages/post/[id]/index.jsx
=> localhost:3000/post ์ ๋งคํ๋ jsx ํ์ผpages/post/[id]/[comment].jsx
=> localhost:3000/post/1/first-comment ๊ณผ ๋งคํ๋ jsx ํ์ผ
components/Header.jsx
import React from "react";
import Link from "next/link";
const Header = () => {
return (
<header>
<ul>
<li>
<Link href="/">
<a>home</a>
</Link>
</li>
</ul>
<ul>
<li>
<Link href="/about">
<a>About</a>
</Link>
</li>
</ul>
<ul>
<li>
<Link href="/post/[id]" as="/post/first">
<a>First Post</a>
</Link>
</li>
</ul>
<ul>
<li>
<Link href="/post/[id]" as="/post/second">
<a>Second Post</a>
</Link>
</li>
</ul>
</header>
);
};
export default Header;
Components
์์ ๋ชจ๋ ํ์ด์ง๊ฐ ๊ฐ๊ฒ๋ Header
์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค.
Header
์ปดํฌ๋ํธ๋ ์๋จ ๋ค๋น๊ฒ์ด์
๋ฐ์ ๊ฐ์ ์ญํ ์ ํ ๊ฒ์ธ๋ฐ, ์ฌ๊ธฐ์ ์ฃผ๋ชฉํด์ผ ํ ๊ฒ์ ๋ฐ๋ก<Link href="/post/[id]" as="">
์์ as
์ ์ญํ ์ด๋ค.
as
Props๋ ๊ณต์ ํํ์ด์ง์ ๋ฐ๋ฅด๋ฉด ๋ธ๋ผ์ฐ์ URL ํ์์ค์ ํ์๋ ๊ฒฝ๋ก์ ๋ํ ์ ํ์ decorator. ์ด๋ผ๊ณ ํ๋๋ฐ, ์ฐ๋ฆฌ๋ ์ฌ๊ธฐ์as
ํ๋กญ์ค๋ฅผ ์ด์ฉํด์ ํด๋น Link ๋ฅผ ํด๋ฆญํ๋ฉด ์ด๋ค url๋ก ์ด๋์ํฌ์ง ๋ช ์ํด์ค ๊ฒ์ด๋ค.
pages/index.jsx
import Link from "next/link";
import Header from "../components/Header";
function Home() {
return (
<>
<Header />
<h1>About page</h1>
</>
);
}
export default Home;
์ด์ ์ค์ง์ ์ผ๋ก localhost:3000/
์ผ๋ก ๋ค์ด๊ฐ์ ๋ ๋ผ์ฐํ
์ ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ณด์.
pages ์์ index.js๋ default ๊ฒฝ๋ก๋ฅผ ๋ํ๋ธ๋ค.
pages/about.jsx
import React from "react";
const about = () => {
return <div>this is about</div>;
};
export default about;
about.jsx๋ ๋์ ๋ผ์ฐํ ๊ณผ ๋ณ๊ฐ๋ก ์ผ๋ฐ์ ์ธ ๋ผ์ฐํ ์ ์ํด ์ถ๊ฐํ์๋ค.
pages/post/[id]/index.jsx
import { useRouter } from "next/router";
import Link from "next/link";
import Header from "../../../components/header";
const Post = () => {
const router = useRouter();
const { id } = router.query;
return (
<>
<Header />
<h1>Post: {id}</h1>
<ul>
<li>
<Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
<a>First comment</a>
</Link>
</li>
<li>
<Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
<a>Second comment</a>
</Link>
</li>
</ul>
</>
);
};
export default Post;
์๊น ๋ดค๋ฏ์ด components/Header.jsx
์์ as
ํ๋กญ์ค๋ก ์ด๋ค ๊ณณ์ผ๋ก ๊ฐ์ง ์ง์ ํด ์ค ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค ์ปดํฌ๋ํธ์ด๋ค.
์ฌ๊ธฐ์๋ ๋๊ธ๋ค์ as
ํ๋กญ์ค๋ก ์ฐ๊ฒฐ์์ผ๋ณด์.
pages/post/[id]/[comment]/.jsx
import { useRouter } from "next/router";
import Header from "../../../components/header";
const Comment = () => {
const router = useRouter();
const { id, comment } = router.query;
return (
<>
<h1>Post: {id}</h1>
<h1>Comment: {comment}</h1>
</>
);
};
export default Comment;
์์ ๊ฐ์ ๊ณผ์ ์ ์ฐ์์ด๋ค.
์ค๋์ ์ด๋ค ๋ฐฉ์์ผ๋ก ํ์ด์ง๋ฅผ ๋งํฌํ๋ฉฐ ๋์ ์ผ๋ก ๋ผ์ฐํ ์ ํ๋์ง์ ๋ํด์ ์์๋ณด์๋ค.
๋๊ธ