Next.js

App Router 구조 이해하기

이전 절에서는 App Router의 파일 기반 라우팅과 page.tsx가 UI를 렌더링하는 구조를 확인했습니다. 또 동적 라우트로 가변 URL을 처리하는 방법도 살펴봤습니다.

중첩 라우트와 폴더의 중첩를 중심으로 App Router 구조 이해하기의 판단 흐름을 읽습니다.

핵심 흐름

1

중첩 라우트의 기본 원리

App Router에서 중첩 라우트는 폴더 구조와 layout.tsx 파일의 조합으로 구현됩니다.

2

중첩 라우트 구현 실습: 대시보드 구조 만들기

이전 장에서 만들었던 대시보드 예시를 확장하여, 중첩 라우트와 레이아웃의 관계를 명확히 이해해 봅시다.

3

레이아웃의 장점과 고려사항

장점 UI 일관성: 웹사이트의 특정 섹션에 일관된 디자인과 기능을 적용하기 용이합니다.

4

중첩 라우트

예를 들어, app/dashboard/settings는 /dashboard/settings 경로를 나타냅니다.레이아웃의 중첩: 각 폴더에 layout.tsx 파일을 정의하면...