사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 '라우팅'이라고 합니다. 어떤 프레임워크든 그 중심에는 반드시 라우팅이 있습니다. 이것은 웹개발의 가장 중요한 요소 중 하나입니다.
용어 정리
예를 들어, "http://a.com/dashboard/analytics/"라는 주소가 있을 때, "/dashboard/analytics/" 부분을 'path'라고 합니다. 그리고 'dashboard'와 'analytics'는 각각 'segment'라고 부릅니다.
segment
소스코드
https://github.com/egoing/nextapp/commit/c5ab90bc87fd3a43d17d73571831789b18f2ebeb
라이브 예제
https://nextapp-nb0cphpkf-egoing.vercel.app/create
절차
페이지를 만드는 방법은 다음과 같습니다.
- 처음에 "/create"로 접속하면 "Not Found"가 출력됩니다.
- 그 다음, "pages/create.js" 파일을 생성합니다.
export default function Create(){
return <>
Create!!
</>
}
- "/create"로 다시 접속하면 정상적으로 페이지가 출력됩니다.
알 수 있는 것
- "pages" 아래의 폴더는 세그먼트를 의미합니다. "/create"는 "pages/create" 폴더를 의미합니다.
- "pages/create.js" 파일이 있다면, 이 파일의 반환 값을 화면에 출력합니다.
- 이 값을 상위 컴포넌트인 "_app.js"의 children 위치에 표시합니다.
- 이때, "pages/index.js"는 무시됩니다.
layout 중첩하기
app/layout.js를 이용하여, app/create/page.js를 감싸는 하위 레이아웃을 만들고 싶다면, 다음과 같은 방법으로 할 수 있습니다:
소스코드
https://github.com/egoing/nextapp/commit/4d57d313cecf0321845aa2c5782ac954a231bcd0
라이브 예제
https://nextapp-i96t0uw1m-egoing.vercel.app/create
절차
1. app/create/layout.js 만들기
export default function Layout(props){
return (
<form>
<h2>Create</h2>
{props.children}
</form>
)
}
typescript
type LayoutProps = {
children: React.ReactNode;
};
export default function Layout(props: LayoutProps) {
return (
<form>
<h2>Create</h2>
{props.children}
</form>
);
}
위의 코드는 새로운 페이지를 만들 때 사용하는 템플릿입니다. 'Create'라는 제목 아래에 자식 컴포넌트를 배치하도록 레이아웃을 정의하고 있습니다.
2. /create로 접속해보기
위의 레이아웃을 적용한 후, 웹 브라우저에서 /create 경로로 이동하면 새로 만든 레이아웃이 적용된 페이지를 볼 수 있습니다.
알 수 있는 것
- app/create/layout.js가 있다면, 이 파일로 app/create/page.js를 포장한 후에 app/layout.js로 포장합니다. 이는 레이아웃의 중첩을 허용합니다.
- Next.js는 URL 경로의 세그먼트에 따라 콘텐츠를 찾고, 해당 콘텐츠가 위치한 폴더의 layout.js를 시작으로 상위 폴더를 탐색하면서 layout.js로 감싸줍니다. 이는 Next.js의 라우팅 로직을 잘 나타내는 특징입니다.
이런 방식으로 Next.js는 간단하고 직관적인 라우팅을 제공하며, 프로젝트의 복잡성을 효과적으로 관리할 수 있도록 도와줍니다.
dynamic routing
read/1, read/2 의 1,2는 가변적으로 변경되는 경로입니다. 이런 경로를 처리하려면 이렇게 하면 됩니다.
소스코드
https://github.com/egoing/nextapp
라이브 예제
https://nextapp-of8msqnwk-egoing.vercel.app/read/1
1. /read/1에 방문합니다.
2. 페이지를 찾을 수 없다는 에러가 발생합니다.
3. /app/read/[id]/page.js를 만듭니다.
4. 코드를 아래와 같이 작성합니다.
export default function Read(props){
return <>
<h2>Read</h2>
parameter : {props.params.id}
</>
}
typescript
type ReadProps = {
params: {
id: string;
};
};
export default function Read(props: ReadProps) {
return (
<>
<h2>Read</h2>
parameter: {props.params.id}
</>
);
}
5. /read/1, read/2를 방문하면 페이지가 잘 출력 됩니다.
6. /read/1 로 접속하면 1의 자리에 해당하는 폴더인 [id]의 이름을 기준으로 props를 만들어서 주입해줍니다. 이 값을 사용해서 여러 작업을 처리할 수 있습니다.
