[Next.js] 3. 로딩 ui, 에러 핸들링, Routes

Next.js 14 Tutorial by Codevolution

 

1. 로딩 ui

해당 폴더에 loding.tsx 생성시 먼저 렌더링 됨

 

2. 에러 핸들링

• 해당 폴더에 error.tsx 파일 생성시 에러 발생시 해당 파일 렌더링 됨
• 컴포넌트에서 error 프로퍼티 전달받을 수 있음
• reset 메소드로 재시도 가능

중첩 라우츠 에러 핸들링

• 폴더 단위 가까운 error.tsx 파일 렌더링 됨

Layouts 에러 핸들링

• layout.tsx, error.tsx 두 파일이 같은 레벨 계층에 존재하면 에러 발생시 캐치 불가능
• 이유는 Layout 컴포넌트가 ErrorBoundary 보다 상위에 위치함
• error.tsx 파일이 layout.tsx 보다 상위 레벨 계층 폴더에 존재하도록 해야함

 

3. Routes

3-1. Parallel Routes

• 폴더내부 @something 와 같은 폴더 명명으로 생성
• slot 이라고 부름
• layout.tsx 컴포넌트 프랍으로 slot 전달받아 렌더링 가능
• slot은 주소경로를 입력하여 라우팅은 불가능함
• slot 단위  독립적으로 동작 (에러, 로딩 핸들링 등)

 

3-2. Unmatched Routes

Sub-navigation

• 슬롯 내부 독립되어 해당 부분만 라우팅하여 렌더링
• 슬롯 내부에 폴더 생성
• 서브 네비게이션으로 주소 이동된 상태에서 새로고침시 해당 페이지 라우팅되지 않음
• 각 슬롯내부 default.tsx 파일 정의하여 새로고침시에도 페이지 유지 가능

 

3-3. Conditional Routes

• layout.tsx파일 return 단에서 렌더링 핸들링

3-4. Intercepting Routes

• 현재 페이지에서 링크 클릭하여 라우팅하는 시나리오시 정의한 파일 렌더링 가능
• 폴더 명명 컨벤션은 아래와 같음
  • (.)something 같은 레벨
  • (..)something 1 레벨 상위 파일 계층
  • (..)(..)something 2 레벨 상위 파일 계층
  • (...)something 앱 루트 최상위 계층

3-5. Parallel Intercepting Routes

현재 페이지에서 href로 라우팅 하는경우

Parallel Intercepting과 Intercepting Routes 혼합하여 사용시 효과적으로 구현 가능

 

ex)

photo-feed 페이지에서 이미지 클릭시 이미지 모달을 띄우려는 경우 파일 계층

• photo-feed 페이지에서 렌더링 되는 파일: photo-feed/ page.tsx
• 이미지 클릭시 렌더링 되는 파일: photo-feed/ @modal/ (..)photo-feed/ [id] /page.ts