Memento
[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 파일 외에 목적에 맞게 관련된 파일을 같이 둘 수 있습니다.
'Study > Nextjs' 카테고리의 다른 글
[Nextjs] xlsx 엑셀 파일 비밀번호 적용 (0) | 2024.04.09 |
---|