라우팅 Fundamentals(입문)

모든 응용 프로그램의 뼈대는 라우팅이다. 이 페이지에서는 Next.js에서 웹에 대한 라우팅의 기본 개념과 라우팅을 처리하는 방법을 소개한다.

1. Terminology(용어)

먼저 문서 전반에 걸쳐 이러한 용어가 사용되고 있음을 확인할 수 있다. 다음은 간단한 참고 사항이다:

• 트리(Tree): 계층(hierarchical) 구조를 시각화하기 위한 규약
  • e.g. 부모 및 자식 구성요소를 가지는 컴포넌트 트리, 폴더 구조, etc.
• 서브트리(Subtree) : 트리의 일부로, 새 root에서 시작해 (처음) leaf에서 끝난다 (마지막).
• 루트(root) : 트리 또는 서브트리의 첫 번째 노드(예: root 레이아웃).
• 리프(Leaf): URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위 트리의 노드

• URL Segment(세그먼트) : 슬래시로 구분되는 URL 경로의 일부
• URL Path : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성됨).

2. app 라우터

Next.js 13에서는 공유 레이아웃, 중첩 라우팅, 로드 상태, 오류 처리 등을 지원하는 React Server Components 기반의 새로운 app 라우터를 도입하였다.

App 라우터는 app이라는 이름의 새로운 디렉터리에서 작동한다. App 디렉터리는 Pages 디렉터리와 함께 작동하여 점진적인 채택을 허용한다. 이를 통해 이전 동작을 위해 Pages 디렉터리에 다른 경로를 유지하면서, 응용 프로그램의 일부 경로를 새로운 동작으로 선택할 수 있다. 응용 프로그램이 Pages 디렉터리를 사용하는 경우, Pages 라우터 설명서도 참조하십시오.

알아 둘만 한

App Router는 Pages Router보다 우선한다. 디렉토리 간의 루트는 동일한 URL 경로로 해결되지 않아야 하며, 충돌을 방지하기 위해 빌드타임 오류를 발생시킨다.

기본적으로 앱 내부의 컴포넌트는 React Server Components이다. 성능 최적화 기능으로 쉽게 채택할 수 있으며, 클라이언트 Components를 사용할 수도 있다.

추천: 서버 구성 요소를 처음 사용하는 경우 서버 컴포넌트 페이지를 확인하십시오.

3. 폴더 및 파일의 역할

Next.js는 파일 시스템 기반 라우터를 사용한다:

• 폴더는 경로를 정의하는 데 사용된다.
  • 경로는 파일 시스템 계층 구조를 따라 root 폴더에서 page.js 파일을 포함하는 최종 leaf 폴더까지 중첩된 폴더의 단일 경로이다.
  • 경로 정의를 참고
• 파일은 경로 세그먼트에 대해 표시되는 UI를 만드는 데 사용됩니다.
  • 특수 파일을 참고

3. Route Segments

경로 내의 각 폴더는 경로 세그먼트(route segment)를 나타낸다. 각 경로 세그먼트는 URL 경로 내의 해당 세그먼트에 매핑된다.

4. 중첩 경로

중첩 경로를 만들려면, 폴더를 서로 안에 중첩폴더를 각각 넣을 수 있다. e.g. App 디렉터리에 2개의 폴더를 중첩시키면서, 새 /dashboard/settings 경로를 추가할 수 있다.

/dashboard/settings 경로는 3개의 세그먼트로 구성됩니다:

• / (Root segment)
• dashboard (Segment)
• settings (Leaf segment)

5. 파일 규칙(Conventions)

Next.js는 중첩된 경로에서 특정 동작을 가진 UI를 만들기 위한 특수 파일 집합을 제공한다:

알아 둘만한

.js, .jsx 또는 .tsx 파일 확장자를 특수 파일에 사용할 수 있습니다.

6. Component Hierarchy(컴포넌트 계층)

경로 세그먼트의 특수 파일에 정의된 React 구성 요소는 특정 계층에서 렌더링됩니다:

• layout.js
• template.js
• error.js (React error boundary)
• loading.js (React suspense boundary)
• not-found.js (React error boundary)
• page.js or nested layout.js

중첩 경로에서 세그먼트의 구성요소는 상위 세그먼트의 구성요소 내부에 중첩됩니다.

7. Colocation(코로케이션)

특수 파일 외에도 app 디렉토리의 폴더 내부에 자신의 파일(예: 구성 요소, 스타일, 테스트 등)을 코로케이팅할 수 있는 옵션이 있습니다.

폴더가 경로를 정의하는 동안 page.js 또는 route.js로 반환되는 내용만 공개 주소 지정이 가능하기 때문입니다.

프로젝트 조직 및 코로케이션에 대해 자세히 알아보세요.

7. 고급 라우팅 패턴

App Router는 또한 더 고급 라우팅 패턴을 구현하는 데 도움이 되는 일련의 규칙을 제공합니다. 여기에는 다음이 포함됩니다:

• 병렬 경로 : 독립적으로 탐색할 수 있는 동일한 뷰에 2개 이상의 페이지를 동시에 보여줄 수 있다.
  • e.g. 대시보드와 같이 자신만의 하위 탐색이 있는 분할 뷰에 사용할 수 있다.
• 경로 가로채기 : 경로를 가로채서 다른 경로의 컨텍스트에 표시할 수 있습니다.
  • 현재 페이지의 컨텍스트를 유지하는 것이 중요할 때 사용할 수 있습니다.
  • e.g. 하나의 작업을 편집하거나 피드에서 사진을 확장하는 동안 모든 작업을 볼 수 있습니다.

이러한 패턴을 통해 더 풍부하고 복잡한 UI를 구축할 수 있으며, 소규모 팀과 개별 개발자가 구현하기에는 역사적으로 복잡했던 기능을 민주화할 수 있습니다.