loading.tsx와 error.tsx는 어떻게 동작하나요?

Question

Accepted Answer

이들은 App Router에서 라우트 세그먼트에 대한 로딩 및 에러 상태를 자동으로 제공하는 **특수 파일**입니다. Next.js가 React Suspense와 Error Boundary로 연결해 주므로 그 보일러플레이트를 작성할 필요가 없습니다. ## loading.tsx — Suspense를 통한 즉각적인 로딩 UI ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // 페이지 데이터를 페칭하는 동안 표시됨 } ``` Next.js는 세그먼트의 `page.tsx`를 이것을 fallback으로 하는 `` 경계로 자동으로 감쌉니다. 그래서 async Server Component가 데이터를 기다리는 동안 사용자는 즉시 `loading.tsx` UI를 보고, 그다음 실제 콘텐츠가 스트리밍되어 들어옵니다. 수동 로딩 상태 관리가 없습니다. ```text 사용자 이동 → loading.tsx 즉시 표시 → 데이터 해결 → 페이지가 교체함 ``` ## error.tsx — 세그먼트의 에러 바운더리 ```tsx "use client"; // 에러 컴포넌트는 반드시 Client Component여야 함 export default function Error({ error, reset, }: { error: Error; reset: () => void; // 재시도: 세그먼트를 다시 렌더링 }) { return (

Something went wrong: {error.message}

); } ``` 페이지(또는 그 데이터 페칭)가 예외를 던지면 Next.js가 이 Error Boundary로 잡아내고 **앱 전체를 무너뜨리는 대신** `error.tsx`를 렌더링합니다. `reset()` 함수는 사용자가 전체 새로고침 없이 재시도하게 해 줍니다. 에러는 세그먼트에 *격리*됩니다. 레이아웃과 앱의 나머지는 온전히 유지됩니다. ## 관련 특수 파일 ```text loading.tsx → Suspense fallback (로딩 상태) error.tsx → 에러 바운더리 (반드시 "use client") not-found.tsx → 404 UI (notFound()로 트리거됨) global-error.tsx → 루트 레이아웃 자체의 에러를 잡음 ``` ## 왜 중요한가 이 파일들은 라우트별로 견고한 로딩 및 에러 처리를 **공짜로** 제공합니다. 스트리밍을 가능하게 하는 Suspense 기반 로딩 UI와, 세그먼트 범위의 재시도 가능한 에러 바운더리죠. 컴포넌트를 통해 `isLoading`/`error` 상태를 엮는 대신 `loading.tsx`와 `error.tsx`를 끼워 넣으면 Next.js가 연결을 처리하여 회복력 있고 반응성 좋은 UX를 만들어 냅니다.