💡 용어 정의
라우팅
- 라우팅은 사용자가 요청한 URL에 따라 어떤 페이지를 보여줄지를 결정하는 과정입니다.
- Next.JS는 앱 라우팅 / 페이지 라우팅을 사용하여 URL 경로와 페이지 파일을 직접 연결합니다.
- 예를 들어서 사용자가 ‘/about’ 경로를 입력하면, Next.JS는 해당 경로와 맞는 페이지를 표시합니다.
- 일종의 행위
라우터(Router)
- 라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다.
- Next.JS에서는 페이지 라우터는 ‘next/router’, 앱 라우터는 ‘next/navigation’가 라우터 관리 도구입니다.
- 우리는 해당 도구에서 제공하는 여러 가지 훅, 컴포넌트를 사용하여 페이지를 탐색합니다.
- 일반적으로 라우터는 사용자의 URL을 해석하고 해당 URL에 맞는 컴포넌트를 렌더링합니다.
라우트(Route)
- 라우트는 URL과 특정 컴포넌트 간의 매핑을 나타냅니다.
- 라우트는 일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는 데 사용됩니다.
- 리엑트에서는 router/index.ts 파일에서 라우트를 정의했습니다.
💡 App Router
정의
Next.js 14에서 새롭게 도입된 라우팅 시스템입니다. 그전에는 페이지 라우터(pages)였습니다.
💡 라우트 설정
기본
앱 라우터는 루트에 app 폴더를 생성하면 자동으로 라우트가 생성됩니다. 예를 들어서 app 폴더 하위에 blog 페이지를 만들고 page.tsx 컴포넌트를 생성하면 /blog에 매핑되는 라우트가 설정됩니다.
app/
├── blog/
│ └── page.tsx --- /blog
├── about/
│ └── page.tsx --- /about
중첩(Nested Route)
특정 폴더 안에 새로운 폴더를 중첩하는 형태로 중첩 경로 지정이 가능합니다.
app/
└── blog/
├── page.tsx - /blog
└── first/
└── -page.tsx -- /blog/first
다이나믹 경로
동적(dyamaic) 경로를 사용하면 특정 세그먼트가 동적으로 변경되는 경로를 지정할 수 있습니다.
app/
└── blog/
├── page.tsx - /blog
└── [id]/
└── page.tsx -- /blog/1 or /blog/2 or /blog/3...
중첩 다이나믹 경로
동적 경로도 중첩이 가능합니다.
app/
└── blog/
├── page.tsx - /blog
└── [id]/
├── page.tsx -- /blog/1 or /blog/2 or /blog/3...
└── comment/
└── [reviewId]/
└── page.tsx. -- /blog/2/comment/1
포괄적 경로 (catch all segments)
특정 경로 이하의 모든 경로를 포괄적으로 허용하는 라우트 지정 방식을 말합니다.
app/
└── docs/
└── [...slug]/
└── page.tsx - /docs/1 or /docs/1/api or /docs/1/api/1 등등 모든 경로 커버 가능
const Docs = ({
params,
}: {
params: {
slug: string[];
};
}) => {
console.log(params); // /docs 이후의 경로가 배열로 들어감 ex_/docs/1/user/1 -> [1, user, 1]
return (
<>
<h1>Docs Component</h1>
</>
);
};
export default Docs;
그룹
앱 라우터는 폴더를 생성하는 즉시 라우트 경로에 반영이 됩니다. 단, 소괄호로 생성한 폴더 안에 넣어두게 되면 소괄호는 경로에 인식되지 않습니다.
app
(home)
page.tsx --- /
(auth)
login
page.tsx --- /login
register
page.tsx --- /register
프라이빗 폴더
폴더에 언더스코어를 붙이면 라우팅을 통해 접근할 방법이 없습니다.
app
_utils
page.tsx - 접근 불가
form-date.ts
💡 라우팅 하기
1. Link 컴포넌트
리액트와 다르게 to 속성이 아닌 것에 주의해야 합니다.
import { Link } from 'next/Link'
<Link href="/">Home</Link>
2. useRouter()
Next.JS에서 제공하는 여러 가지 훅을 사용해서 라우팅을 처리할 수 있습니다.
종합
import { useRouter } from 'next/router';
const NavigationComponent = () => {
const router = useRouter();
return (
<div>
<button onClick={() => router.back()}>Go Back</button> // 브라우저 뒤로가기
<button onClick={() => router.forward()}>Go Forward</button> // 브라우저 앞으로가기
<button onClick={() => router.push('/about')}>Go to About</button> // 브라우저 URL 이동(기록O)
<button onClick={() => router.replace('/about')}>Replace to About</button> //브라우저 URL 이동(기록X)
<button onClick={() => router.refresh()}>Refresh Page</button> // 브라우저 새로고침
</div>
);
};
export default NavigationComponent;
💡 라우팅 파라미터
1. usePathname()
현재 라우팅의 경로를 반환하는 훅입니다.
"use client";
import { usePathname } from "next/navigation";
export default function Product() {
const pathname = usePathname();
console.log(pathname); // <http://localhost:3000/products> -> /products
return (
<>
<h1>Product Component</h1>
</>
);
}
2. useSearchParams()
queryString 문자열을 가져올 때 사용하는 훅입니다.
"use client";
import { useSearchParams } from "next/navigation";
export default function Product() {
const searchParams = useSearchParams();
console.log(searchParams.get("id")); // <http://localhost:3000/products?id=1> -> 1
return (
<>
<h1>Product Component</h1>
</>
);
}
3. Param props
페이지 컴포넌트에 기본으로 전달되는 params 옵션 속성을 사용하면 동적 세그먼트를 받을 수 있습니다.
type TProps = {
params: {
id: string;
};
searchParams: {
lang: string;
};
};
export default function ProductDetail(params: TProps) {
// <http://localhost:3000/products/1> -> {id: 1}
console.log(params); //{ params: { id: '1' }, searchParams: { lang: 'ko' } }
console.log(params.params.id); // 1
console.log(params.searchParams.lang); // ko
return (
<>
<h1>ProductDetail Component</h1>
</>
);
}
반응형
