Creating Routes
app에서 폴더들은 경로를 결정합니다.
page.js 파일은 경로가 사용하는 파일로 없다면, 경로에서 사용되지 않습니다.
Creating UI
여러 특정 파일들은 UI를 만드는데 사용됩니다. 대부분은 특정 경로를 위해 사용되지만, layout의 경우에는 여러 경로에서 사용됩니다.
Route Groups
app의 계층 구조입니다.
•
URL구조에 영향없이 route를 구성할 수 있습니다.
•
layout에서 특정 구조를 선택합니다.
•
어플리케이션을 쪼개서 여러 root layout을 사용할 수 있습니다.
Convention
루트 크룹은 폴더이름을 괄호로 둘러사서 작성할 수 있습니다.
Example: Organize routes witout affecting the URL path
경로를 생성할지 않고, 경로들을 묶을 수 있습니다. 또한 이러한 방법을 통해서 layout.js를 각자 생성할 수 있습니다.
Good to know
•
루트 그룹의 이름은 URL 경로에 영향을 주지 않습니다.
•
묶었다고 해도 같은 URL 경로를 사용할 수 없습니다.
•
root layout 여러개를 통과할 시 전체 페이지 로드의 원인이 됩니다. 예를들어 /cart (app/(shop)/layout.js)에서 /blog(app/(marketing)/layout.js)로 이동 시 전체 페이지 로드가 실행됩니다.
Dynamic Segments
Convention
대괄호로 묶어서 사용할 수 있습니다. ex) [id]
Example
// app/blog/[slug]/page.js
export default function Page({ params }) {
return <div>My Post</div>
}
JavaScript
복사
Catch-all Segments
배열 확장을 통해 여러 dynamic을 만들 수 있습니다. […folderName]
ex) app/shop/[…slug]/page.js
•
/shop/clothes
•
/shop/clothes/tops
•
/shop/clothes/tops/t-shirts
Optional Catch-all Segments
catch-all과 optional catch-all 의 차이는 파라미터가 없는 경로도 유효하다는 것입니다.
[[…folderName]]
Typescript
params에 타입을 매겨야할텐데 각자 형식에 맞게 매겨야 합니다.
export default function Page({ params }: { params: { slug: string}}){
return <h1>My Page</h1>;
}
JavaScript
복사