[Nextjs14] Routing 용어 정리

• Tree: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등을 말합니다.
• Subtree: 트리의 일부분을 말하며, 루트부터 시작하고 리프로 끝나는 구조를 말합니다.
• Root: 트리 또는 서브트리의 시작 지점을 말합니다.
• Leaf: URL 경로의 마지막 segment와 같이 하위 구성 요소가 없는 서브트리의 노드들을 말합니다.

Routes Segments

• Root segment: /
• Segment: dashboard
• Leaf segment: settings

File Conventions

Name	Descripton
layout	하위 구성 요소를 위한 공유 레이아웃 UI
page	route에 unique하게 제공되는 UI
loading	하위 구성 요소를 위한  로딩 UI
not-found	하위 구성 요소를 위한  Not found UI
error	하위 구성 요소를 위한 Error UI
global-error	하위 구성 요소를 위한 Global error UI
route	서버 사이드 api endpoint
template	특정하게 re-render된 레이아웃 UI
default	Parallel Routes를 위한 Fallback UI

 

Component Hierarchy

구성요소 단위마다 아래와 같이 파일 구성 요소를 선언할 수 있다.

Colocation

Colocation이란?

리액트에서는 컴포넌트, 스타일 및 관련 로직을 동일한 파일이나 동일한 디렉터리에 두는 것을 코로케이션으로 생각할 수 있습니다. 예를 들어, 리액트 함수 컴포넌트와 관련 스타일 및 훅을 동일한 파일에 두는 것이 컴포넌트 코로케이션의 예입니다.

 

즉, app 디렉토리 하위에 page 또는 route 파일 외에 목적에 맞게 관련된 파일을 같이 둘 수 있습니다.