Next ๋ผ์ฐํฐ๋ ์๋ฒ ์ค์ฌ์ ๋ผ์ฐํ ๊ณผ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ค๋น๊ฒ์ด์ ์ ์ฌ์ฉํ๋ค.
์ฆ๊ฐ์ ์ธ ๋ก๋ฉ ์ํ์ concurrent ๋ ๋๋ง์ ์ง์ํ๋ค.
์ฆ, ๋ค๋น๊ฒ์ด์ ์ ํด๋ผ์ด์ธํธ ์ํ๋ฅผ ์ ์งํ๊ณ , ๋น์ฉ์ด ๋ง์ด ๋๋ ์ฌ๋ ๋๋ง์ ํผํ๊ณ , ์ค๋จํ ์ ์์ผ๋ฉฐ race condition์ ์ ๋ฐํ์ง ์๋๋ค.
<Link> ์ปดํฌ๋ํธ
HTML <a> ์์๋ฅผ ํ์ฅํ ๊ฒ์ผ๋ก prefetching๊ณผ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ค๋น๊ฒ์ด์ ์ ์ ๊ณตํ๋ค.
Next์์ ๋ค๋น๊ฒ์ด์ ์ ์ฃผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
ํน์ ์ํฉ์ด ์๋๋ผ๋ฉด <Link> ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๊ณ ์๋ค.
import Link from 'next/link';
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>;
}
next/link์์ importํด์ href๋ฅผ ์ค์ ํด์ฃผ๋ฉด ๋๋ค.
๋์ ์ผ๋ก ๊ฒฝ๋ก ์ค์ ํ๊ธฐ
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํด์ฃผ๋ฉด ๋๋ค.
import Link from 'next/link';
export default function PostList({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${post.slug}`}>
{post.title}
</Link>
</li>
))}
</ul>
);
}
useRouter
useRouter ํ ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์์์ route๋ฅผ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.
'use client';
import { useRouter } from 'next/navigation';
export default function Page() {
const router = useRouter();
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
);
}
next/navigation์์ importํด์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์์์ ํ ์ ํธ์ถํ๋ฉด ๋๋ค.
useRouter์ push, refresh ๋ฑ๊ณผ ๊ฐ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ค.
Navigation์ด ์๋ํ๋ ๋ฐฉ์
1. <Link> ๋๋ router.push()๋ฅผ ํตํด ๊ฒฝ๋ก๊ฐ ๋ณ๊ฒฝ๋๋ค
2. ๋ผ์ฐํฐ๋ ๋ธ๋ผ์ฐ์ ์ ์ฃผ์์ฐฝ์ URL์ ๋ณ๊ฒฝํ๋ค.
3. rotuer๋ ํด๋ผ์ด์ธํธ ์บ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ๋์ง ์์ segment๋ ์ฌ์ฌ์ฉํ๋ค.
4. soft navigation์ ์กฐ๊ฑด์ ์ถฉ์กฑํ๋ฉด, ๋ผ์ฐํฐ๋ ์บ์์์ ์๋ก์ด segment๋ฅผ ํจ์นํ๋ค. ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ, ๋ผ์ฐํฐ๋ hard navigation์ ์ํํ๊ณ ์๋ฒ๋ก๋ถํฐ ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ํจ์นํ๋ค.
hard navigation: ์บ์๊ฐ ์ ํจํ์ง ์์์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ ๋ค์ ๋ ๋๋งํ๋ ๋ฐฉ์
soft navigation: ์บ์๊ฐ ์ฌ์ฌ์ฉ๋์ด ์๋ฒ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ์ง ์๋ ๋ฐฉ์
soft navigation ์กฐ๊ฑด
1. prefetch๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
2. ๋์ ๋ผ์ฐํ ์ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ
3. ํ์ฌ ๊ฒฝ๋ก์์ ๋์ผํ ๋์ ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
5. ์์ฑ๋๋ฉด, ๋ฐ์ดํฐ๊ฐ ํจ์น๋๋ ๋์ ์๋ฒ๋ก๋ถํฐ ๋ก๋ฉ UI๋ฅผ ๋ณด์ฌ์ค๋ค
6. ๋ผ์ฐํฐ๋ ์๋ก์ด segment๋ฅผ ๋ ๋๋งํ๊ธฐ ์ํด ์บ์๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์จ๋ค.
Client-side ์บ์ฑ
Client-side ์บ์๋ Next์ HTTP ์บ์์๋ ๋ค๋ฅด๋ค.
์๋ก์ด ๋ผ์ฐํฐ๋ ์๋ฒ ์ปดํฌ๋ํธ์ ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฅผ ์ ์ฅํ๋ ์ธ๋ฉ๋ชจ๋ฆฌ client-side ์บ์๋ฅผ ๊ฐ๊ณ ์๋ค.
์ฆ, ํน์ ๊ฒฝ์ฐ์ ๋ผ์ฐํฐ๋ ์๋ฒ์ ์๋ก์ด ์์ฒญ์ ํ์ง ์๊ณ ์บ์๋ฅผ ์ฌ์ฉํ๋ค.
'๐ฉโ๐ค ํ๋ก ํธ์๋ > nextjs' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Next.js][react-query] API Routes ์ฌ์ฉ์ ๋ฌดํ request ๋ฐ์ ์ด์ (0) | 2023.02.09 |
---|---|
[NextJS] Pages, Layouts (0) | 2023.01.31 |
[NextJS] Routing (0) | 2023.01.31 |