[Next14] 라우팅 기초 : Routing Fundamentals

해당 글은 Next.js 공식문서를 해석한 글입니다.

학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.

정확한 내용은 아래의 공식문서를 참고해주세요!

https://nextjs.org/docs/app/building-your-application/routing

---

모든 어플리케이션의 뼈대는 routing입니다.

이 글에서는 웹 라우팅의 기초 컨셉을 소개하고 Next에서는 라우팅을 어떻게 다루는지에 대한 내용을 다루었습니다.

 

용어

우선, 용어 소개를 간단하게 하고 넘어가겠습니다.

 

- Tree : 위계구조를 시각화하여 부르는 용어

- Subtree : tree의 일부분

- Root : tree 혹은 subtree에서 첫 번째 노드

- leaf : 자식 노드를 갖지 않은 노드

 

- URL Segment : 슬래시(/)에 의해 구분되는 url의 일부분

- URL Path : url segment의 묶음으로, 도메인 이후에 오는 url의 일부분

---

Route Segments

각 폴더는 route segment가 되고, 이는 url path에서 동일한 url segment가 됩니다.

 

예를 들어볼게요.

app(root segment) 폴더 하위에 dashboard(segment) 폴더가 있고, 그 하위에 settings(leaf segment) 폴더가 있다고 가정할 때,

app, dashboard, settings는 각각 url segment가 됩니다.

그리고 폴더구조 그대로 url path가 만들어지기 때문에, settings 페이지에 접근하기 위한 url path는 domain.com/dashboard/settings 이 됩니다.

 

---

File Convention

Next에는 특별한 파일 컨벤션이 있습니다. 이 컨벤션에 맞게 파일명을 설정하여 UI를 만듭니다.

- layout : 해당 segment와 leaf segment에서 공유하는 UI

- page : 해당 segment에 접근 가능하게 만드는 고유한 UI

- loading : 해당 segment와 하위 segment가 로딩중일 때 나타나는 UI

- not-found : 해당 segment와 하위 segment의 page가 없을때 나타나는 UI

- error : 해당 segment와 하위 segment에서 에러가 발생했을 때 나타나는 UI

- global-error : 전역 에러 UI

- route : 서버사이드 API 엔드포인트

- template : 반복적으로 사용되는 레이아웃 UI

- default : 대체(fallback) UI

---

컴포넌트 위계

앞서 말한 File Convention에 따른 파일들은 다음과 같은 순서에 따라 따라 리액트 컴포넌트가 생성됩니다.

- layout

- template

- error

- loading

- not-found

- page or nested layout

 

 

 

중접된 폴더로 라우트 구조를 만들었다면,

부모 segment(dashboard)의 컴포넌트 안에 하위 segment(settings)가 중첩됩니다.