[Next js] : Routing1

1. 라우팅을 이해하기 위한 주요 용어

 

(1) Tree 관련

Tree : 계층 구조를 시각적으로 잘 보기 위한 규칙(위 → 아래)

Subtree : tree의 한 부분, root부터 시작해서 leaf들에 이르기까지  범위

Root : Tree 또는 Subtree의 첫번째 노드

ex) root layout

Leaf : children이 더 이상 없는 node

(2) URL 관련

• URL Segment
  슬래시(/)로 분류된 URL path의 한 부분
• URL Path
  도메인(www.sample-web.com) 이후 따라오는 전체 URL 부분

 

2. 파일(폴더) 기반 라우팅

(1) page.tsx : main ui가 표시될 곳

(2) static routing : react-router-dom과 같은 별도의 라이브러리 필요 없이

src > app 폴더 밑에 폴더를 새로 만들고 그 안에 page.tsx 파일을 만들면 됨

(3) dynamic routing : 폴더 이름을 대괄호로 감싸면 됨 ex)app/posts/[id]/page.tsx

(4) route groups : 아래와 같이 폴더에 소괄호를 치면 라우팅에 포함이 되지 않음