인프런 커뮤니티 질문&답변

안녕하세요. 질문주셔서 감사합니다.
app 디렉터리에서 loading.tsx 파일은 특수한 파일입니다. 그래서 어쩔수 없이 중복으로 넣어야 해요. 그것이 3.4 React Suspense ( Streaming, Progressive Hydration ) 의 개념입니다.

제가 설명이 부족했던 부분 입니다. !

1."모듈로 만들어 여러 곳에서 재사용하는 방식이 더 효율적"

-> loader.tsx로 재사용성을 그나마 가져가도록 만들었어요.

2.에러나 로딩을 전역적으로 1번만 넣으면 ?

• root layout에 loading.tsx를 추가하면 앱 전체에 대한 로딩 UI가 적용되고, 추후 서브 페이지 이동할때는 로딩이 없습니다.

3.서브 페이지의 에러나 로딩을 중복해서 넣지 않고, 클라이언트 상태로 전역적으로 1번만 관리하면?

• SSR의 Loading 상태를 CSR의 상태관리로 대신하는것은 생각해본 방법은 아니지만 가능해 보입니다.

• 다만 정석적인 방법은 아니긴 합니다.

• React Suspense 컴포넌트에는 fallback(loading) 컴포넌트를 받을 수 있는데 loading 컴포넌트를 넣지 않는 방법을 생각해주신 것 같네요.

   

• fallback 컴포넌트 ( loading 컴포넌트, app router에서는 중복을 정의 했던 그 loading.tsx 입니다. ) 안넣어도 무방합니다.

• 문제점은 error, loading이 끝나는 처리는 따로 해주셔야 하는데 그게 더 복잡해질 수 있어요.

   

4.차리리 중복해서 넣는 loading.tsx를 제거하는게 나은 선택일 수 있습니다.

• 그러나 SSR 이 오래 걸리는 케이스라면, 사용자 입장에서는 페이지가 잠깐 먹통이 되었다고 생각할 수 있어요.

추가로 아래 GPT 응답을 참고해주세요.!

🤖 next.js app router에서 root layout 에 loading 파일 넣는것과 서브 페이지에 loading 파일 넣는것과 안넣는것의 차이는?

🤖 결론

• root layout에 loading.tsx를 추가하면 앱 전체에 대한 로딩 UI가 적용돼요.

• 서브 페이지에만 loading.tsx를 추가하면 그 페이지에 한정된 로딩 UI만 표시돼요.

• 아무데도 loading.tsx를 추가하지 않으면, Next.js의 기본 라우팅 방식(서버 사이드 렌더링 & 클라이언트 측 전환)이 적용되며, 별도의 로딩 화면 없이 페이지가 변경돼요.

1. root layout에 loading.tsx 추가

파일 위치:

app/loading.tsx

동작 방식:

• 앱 전체에 대한 로딩 UI가 적용돼요.

• 페이지 전환 시마다 loading.tsx가 표시돼요.

• 레이아웃이 변경되지 않는 경우에도 로딩이 발생할 수 있어요.

예제 코드 (app/loading.tsx)

export default function Loading() {
  return <div>로딩 중...</div>;
}

사용 예시:

app/
 ├── layout.tsx
 ├── loading.tsx  // 전체 앱의 로딩 UI
 ├── page.tsx
 ├── dashboard/
 │   ├── page.tsx
 │   ├── loading.tsx  // 이 파일이 있으면 dashboard만 개별 로딩 적용됨

👉 모든 페이지 전환에서 loading.tsx가 적용되므로, 글로벌한 로딩 상태를 다룰 때 유용해요.

2. 특정 서브 페이지에 loading.tsx 추가

파일 위치 (예: dashboard 페이지에 추가):

app/dashboard/loading.tsx

동작 방식:

• dashboard 페이지가 로딩될 때만 loading.tsx가 표시돼요.

• dashboard 내부에서 페이지 이동 시에도 적용 가능해요.

• 다른 페이지에는 영향을 주지 않아요.

👉 특정 페이지의 로딩 상태만 관리하고 싶을 때 유용해요.

3. loading.tsx를 넣지 않으면?

• 페이지 전환 시 Next.js의 기본 렌더링 방식(서버 사이드 렌더링 + 클라이언트 전환)이 동작해요.

• 새 페이지를 가져오는 동안 화면이 빈 상태가 될 수도 있어요.

• 필요하면 Suspense를 활용해 비동기 렌더링을 제어할 수도 있어요.

예제 (클라이언트 컴포넌트에서 Suspense 사용)

import { Suspense } from "react";
import SomeComponent from "./SomeComponent";

export default function Page() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <SomeComponent />
    </Suspense>
  );
}

👉 loading.tsx를 추가하지 않아도, Suspense를 활용하면 비동기 데이터를 로딩하는 동안 특정 UI를 보여줄 수 있어요.

✅ 정리

위치

적용 범위

언제 유용한가?

app/loading.tsx

앱 전체

모든 페이지 전환에서 로딩 UI를 적용할 때

app/서브페이지/loading.tsx

특정 페이지

개별 페이지에서만 로딩 UI를 적용할 때

loading.tsx 없음

없음

기본 Next.js 페이지 전환을 사용할 때

즉, 전역 로딩이 필요하면 root layout에, 개별 로딩이 필요하면 해당 페이지에 추가하는 게 적절해요! 🚀

개발에 있어 기능이나 UI를 재사용하는 것이 굉장히 기본적이고 중요한 부분이라고 생각하는데

현재 강의에서는 로딩 화면이나 에러 페이지 같은 공통된 요소들을 모든 폴더에 복사 붙여넣기로 동일한 파일을 중복으로 생성하는 방식으로 진행하고 있습니다. 보통 이런 공통 요소들을 하나의 컴포넌트나 모듈로 만들어 여러 곳에서 재사용하는 방식이 더 효율적이라고 생각합니다.

리엑트에서 그러지 않고, 모든 폴더에 복사 붙여넣기로 만들어두라고 하셨는데 이유가 무엇인지에 대한 설명이 부족해 여쭤보는 것입니다. 저 뿐만이 아닌 다른 수강생 분들도 잘못된 지식의 선입견이 생길까봐 그렇습니다. 이후 강의에서 설명을 하실지는 모르겠지만, 완강을 하지 못하는 분들은 잘못된 지식을 가져갈 일이 발생할 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. Junho님.

페이지별로 각각의 loading과 error 페이지를 만들고 있는 것에 대해 의문을 가지셨군요. 일반적으로 loading과 error 컴포넌트를 전역적으로 관리하는 방식도 많이 사용됩니다. 하지만, 개별 페이지마다 별도로 관리하는 경우도 흔히 있습니다. 이는 다음과 같은 이유에서 고려될 수 있습니다:

1. 유연한 UI 제공: 각 페이지마다 다른 스타일이나 메시지를 제공할 수 있습니다. 예를 들어, 특정 페이지에서는 사용자에게 추가적인 정보를 제공하거나 페이지별 특성에 맞춰 로딩이나 에러 메시지가 다르게 출력될 수 있습니다.

2. 페이지별 요구사항 차별화: 각 페이지가 제공하는 기능이나 비즈니스 로직이 다를 경우, 로딩 중 표시할 UI가 다를 수 있고 에러 상황에 대한 처리가 다를 수 있습니다.

3. 페이지별로 독립적인 구성 유지: 프로젝트의 구조를 더욱 모듈화하고 페이지마다 독립적으로 유지보수할 수 있게 합니다. 이는 팀 단위로 작업 시에 개별 페이지 변경이 다른 페이지에 영향을 주지 않도록 설계할 수 있습니다.

4. 차별화된 사용자 경험 제공: 사용자를 위한 세밀한 UX 개선을 위해 페이지에 따라 다르게 설계할 수 있습니다.

위와 같은 이유로 인해 페이지별로 loading과 error 처리를 별도로 구축하기도 합니다. 물론, 프로젝트의 요구사항과 팀의 개발 방향에 따라 여러 방법을 고려해야 할 것입니다.

관련된 기존 질문 중 하나를 확인해 볼 수 있습니다:
- 각 페이지별로 로딩, 에러 처리하는 이유는 무엇인가요?

위의 내용을 참고하시어 프로젝트 구조에 대해 더 깊이 이해해 보시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.