# Route Groups
URL path에 영향을 미치지 않으면서 다양한 이유로 폴더를 추가하고자 할 때 사용된다.
폴더명을 '(folderName)' 형식으로 괄호로 감싸서 생성하면 자동으로 적용된다
1. URL path에 영향 없이 route를 정리
관련된 항목끼리 폴더로 정리할 수 있다.
2. 각 그룹 별 layout.js 적용
ex. marketing 하위 항목에는 side bar가 적용되나 shop 하위 항목에는 적용되지 않는 경우, 이를 구현하기 위해 활용 가능
3. Multiple root layouts
각 그룹 별로 아예 별도의 root layout을 가져야 하는 경우 활용 가능.
이 때 각 그룹의 모든 root layout은 <html>과 <body>를 가져야 함을 명심하자.
※ Route Group 사용 시 주의사항
- URL path가 겹치지 않도록 주의. 예를 들어 '(marketing)/about/page.js'와 '(shop)/about/page.js'는 모두 '/about'으로 취급되므로 같은 URL path가 2개인 것으로 인식되고 오류가 발생한다.
- top-level layout.js 없이 multiple root layout을 사용할 경우 route group 중 하나라도 page.js를 가져야 한다. 이 page.js가 home의 page가 된다.
- 상위 폴더에 page.js가 있는 경우 route group의 바로 아래에 있는 page.js는 아무런 의미가 없다. 애초에 해당 URL에 접근이 불가하기 때문이다.
- multiple root layout의 경우 페이지 전체 리로드가 빈번히 발생할 수 있으므로 주의.
# Dynamic Routes
사전에 route의 이름을 알 수 없는 경우 dynamic segment를 활용할 수 있다.
폴더명을 '[folderName]'과 같은 형식으로 작성하면 된다.
아래 예시와 같이 posts 폴더 내에 dynamic segment로 [post] 폴더 생성 후 page.tsx를 생성한다.
그 후 localhost:3000/posts/****에 접속하면 **** 자리에 어떤 문자열을 사용하던지 [post]의 page.tsx가 로딩되는 모습을 볼 수 있다.
이 때 params object를 통해 URL segment를 string으로 가져올 수 있으며 이 string의 key는 [ ] 안에 설정한 dynamic segment의 이름으로 설정된다.
※ dynamic segment의 우선순위
만약 한 폴더 내에 dynamic segment와 일반 segment가 같이 존재하는 경우 일반 segment의 우선순위가 더 높게 설정된다.
아래와 같이 posts 폴더 내에 admin page를 생성해놓은 경우, localhost:3000/posts/admin으로 접속 시 [post]/page.tsx가 아닌, admin/page.tsx가 로딩되는 것을 확인할 수 있다.
# Catch-all Segments & Optional Caht-all Segments
Dynamic segments의 브라켓 내부에 '...'을 추가하면 catch-all segment로 사용 가능하다.
일반 dynamic segment가 1-depth로 사용 가능한 것에 반해 catch-all segment는 하위 route까지 전부 사용이 가능하다.
그 예시로, 폴더명이 '[post]' 였을 때 'localhost:3000/posts/aa/bb/cc'로 접속하면 '404 not found' error를 볼 수 있으나, '[...post]'일 경우 폴더 내 paget.tsx가 출력되는 것을 볼 수 있다.
Optional catch-all segment는 catch-all segment의 바깥에 브라켓을 한 번 더 씌워 사용하며(ex. [[...post]]) catch-all segment와의 차이점은 paramter가 없는 경우에도 해당 폴더 내부의 page.tsx가 출력된다는 것이다.
예를 들어, 'posts' 폴더 내에 page.tsx가 없더라도 [[...post]를 사용하면 'localhost/3000/posts' 접속 시 [[...post]] 내 page.tsx가 출력된다.
물론 optional catch-all segment를 사용하더라도 상위 폴더의 page.tsx가 있으면 그것을 출력한다.
'Web development > Next.js Docs 파헤치기' 카테고리의 다른 글
| 2.2 Linking and Navigating (0) | 2023.06.16 |
|---|---|
| 2.1 Pages and Layouts (0) | 2023.06.16 |
| 2.0 Routing (0) | 2023.06.16 |
| 1. Next.js 시작하기 (0) | 2023.06.13 |
