라우팅 기초

모든 애플리케이션의 골격은 라우팅입니다. 이 페이지에서는 웹을 위한 라우팅의 기본 개념과 Next.js에서 라우팅을 처리하는 방법을 소개합니다.

용어

먼저, 문서 전체에서 사용되는 이 용어들을 보게 될 것입니다. 여기 간단한 참고 자료가 있습니다:

• 트리 (Tree): 계층적 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등입니다.
• 서브트리 (Subtree): 트리의 일부로, 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝납니다.
• 루트 (Root): 트리나 서브트리의 첫 번째 노드로, 루트 레이아웃과 같습니다.
• 잎 (Leaf): 자식이 없는 서브트리의 노드로, URL 경로의 마지막 세그먼트와 같습니다.

• URL 세그먼트 (URL Segment): 슬래시로 구분된 URL 경로의 일부입니다.
• URL 경로 (URL Path): 도메인 이후에 오는 URL의 일부(세그먼트로 구성됨)입니다.

app 라우터

버전 13에서 Next.js는 React 서버 컴포넌트를 기반으로 한 새로운 App 라우터를 도입했습니다. 이는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원합니다.

App 라우터는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 점진적 채택을 위해 pages 디렉토리와 함께 작동합니다. 이를 통해 애플리케이션의 일부 경로는 새로운 동작을 사용하도록 선택하고, 다른 경로는 이전 동작을 위해 pages 디렉토리에 유지할 수 있습니다. 애플리케이션에서 pages 디렉토리를 사용하는 경우 Pages 라우터 문서도 참조하세요.

알아두면 좋은 점: App 라우터는 Pages 라우터보다 우선순위가 높습니다. 디렉토리 간 경로는 동일한 URL 경로로 해석되어서는 안 되며, 충돌을 방지하기 위해 빌드 시 오류가 발생합니다.

기본적으로 app 내의 컴포넌트는 React 서버 컴포넌트입니다. 이는 성능 최적화이며 쉽게 채택할 수 있도록 해주며, 클라이언트 컴포넌트도 사용할 수 있습니다.

권장사항: 서버 컴포넌트를 처음 접하신다면 서버 페이지를 확인해보세요.

폴더와 파일의 역할

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

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

경로 세그먼트

경로의 각 폴더는 경로 세그먼트를 나타냅니다. 각 경로 세그먼트는 URL 경로의 해당 세그먼트에 매핑됩니다.

중첩 경로

중첩 경로를 만들려면 폴더를 서로 중첩시킬 수 있습니다. 예를 들어, app 디렉토리에 두 개의 새 폴더를 중첩하여 새로운 /dashboard/settings 경로를 추가할 수 있습니다.

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

• / (루트 세그먼트)
• dashboard (세그먼트)
• settings (리프 세그먼트)

파일 규칙

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

알아두면 좋은 점: 특수 파일에는 .js, .jsx, 또는 .tsx 파일 확장자를 사용할 수 있습니다.

컴포넌트 계층 구조

경로 세그먼트의 특수 파일에 정의된 React 컴포넌트는 특정 계층 구조로 렌더링됩니다:

• layout.js
• template.js
• error.js (React 오류 경계)
• loading.js (React 서스펜스 경계)
• not-found.js (React 오류 경계)
• page.js 또는 중첩된 layout.js

중첩 경로에서 세그먼트의 컴포넌트는 부모 세그먼트의 컴포넌트 내부에 중첩됩니다.

동일 위치 배치

특수 파일 외에도 app 디렉토리 내의 폴더에 자체 파일(예: 컴포넌트, 스타일, 테스트 등)을 동일 위치에 배치할 수 있는 옵션이 있습니다.

이는 폴더가 경로를 정의하지만, page.js 또는 route.js에 의해 반환된 내용만 공개적으로 주소를 지정할 수 있기 때문입니다.

프로젝트 구성 및 동일 위치 배치에 대해 자세히 알아보세요.

고급 라우팅 패턴

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

• 병렬 라우트: 동일한 뷰에서 두 개 이상의 페이지를 동시에 표시할 수 있게 해줍니다. 이를 독립적으로 탐색할 수 있는 자체 하위 탐색이 있는 분할 뷰에 사용할 수 있습니다. 예: 대시보드.
• 인터셉팅 라우트: 경로를 가로채고 다른 경로의 컨텍스트에서 표시할 수 있게 해줍니다. 현재 페이지의 컨텍스트를 유지하는 것이 중요할 때 이를 사용할 수 있습니다. 예: 한 작업을 편집하면서 모든 작업을 보거나 피드에서 사진을 확대하는 경우.

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

다음 단계

이제 Next.js의 라우팅 기초를 이해했으니, 아래 링크를 따라 첫 번째 경로를 만들어보세요: