페러렐 라우트(default.tsx)

Next + React Query로 SNS 서비스 만들기

작성

강사님 안녕하세요! 강의 수강 후 개인 프로젝트 진행중인데 페러렐 라우트 부분에서 막혀 질문남깁니다ㅜㅠ..

default.tsx는 강의에서 진행해주신대로 return null;을 넣었습니다. (.next 캐쉬도 지웠습니다)

// 폴더구조
app/
├──(afterLogin)
│   ├── _component
│   │   ├── Header.tsx // header 컴포넌트
│   ├── @message
│   │   ├── page.tsx
│   │   ├── default.tsx
│   ├── @modal
│   │   ├── //...compose/[username] 등 폴더
│   │   ├── default.tsx
│   ├── home
│   │   ├── page.tsx // home 컴포넌트
│   ├── default.tsx
│   ├── layout.tsx
│   │
├──(beforeLogin)
│   ├── page.tsx
│   ├── layout.tsx
├── layout.tsx

// (afterLogin)/layout.tsx
import { ReactNode } from "react";
import Header from '@/app/(afterLogin)/_component/Header';

type Props = {children: ReactNode, modal: ReactNode, message: ReactNode;};
export default function AfterLoginLayout({children,modal,message,}: Props) {
  return (
    <div className="wrap">
      <Header />
      <div className="container">{children}</div>
      <div className="chatting">{message}</div>
      {modal}
    </div>
  );
}

해당 이미지와 같이 layout에서 header/{children}/{message}/{modal}을 띄우고 싶은데 message부분이 나오고 있지 않습니다..! (그래서 afterLogin의 layout.tsx와 같은 상위요소에 default를 만들어도 똑같더라구요..)

<질문>
1. 제가 폴더구조를 잘못 짠 걸까요..?

2. (afterLogin)/@message/default.tsx(default.tsx에서 @message/page.tsx를 import해서 진행해도 될까요? 요런식으로 하면 잘 노출이 됩니다..!)

import Message from './page'; 
export default function Default() {   return <Message /> }

3. 아니면 header처럼 컴포넌트 형식으로 메시지창만 만든다음 onClick되면 -> 인터셉팅으로 가로채는것(/message/page.tsx)이 좋을까요?

조언 부탁드리겠습니다..!! ĭ˄ĭ

react next.js react-query next-auth msw

답변 2

제로초(조현영)

지식공유자

2번처럼 하시는 게 맞습니다. page.tsx와 default.tsx의 용도는 다음과 같다고 보시면 됩니다. 다음과 같은 걸 원하신다면 2번 구조로 가시면 됩니다.

/ 주소에서는 page.tsx가 렌더링되고, 다른 주소로 Link 통해서 이동해도 계속 page.tsx 화면이 유지됩니다.
/ 주소가 아닌 다른 주소에서 새로고침을 하면 default.tsx 화면이 표시됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 인생꿀잼님의 질문에 대해 답변 드리겠습니다.

질문 요약

인생꿀잼님께서는 페러렐 라우트를 사용하는 과정에서 message 섹션에 페이지가 올바르게 출력되지 않는 문제에 대해 질문하셨습니다. 폴더 구조의 문제일 수도 있고, 여러 방법으로 문제를 해결하려고 시도 중이신 것 같습니다.

1. 폴더 구조의 검토

페러렐 라우트를 사용하는 경우, @로 시작하는 폴더는 병렬적으로 뷰를 구성하기 위해 사용됩니다. 따라서 @message와 같은 폴더는 layout에서 props를 받게 되며, 해당 props를 적절히 사용하여 화면에 렌더링해야 합니다.

현재 보여주신 폴더 구조 상에서는 @message 폴더 내부에 page.tsx와 default.tsx가 존재합니다. page.tsx는 특정 URL에서 렌더링될 페이지 컴포넌트로, default.tsx는 해당 경로에서 구체적인 페이지 컴포넌트가 없을 때 기본적으로 렌더링되는 폴백 역할을 합니다.

2. `default.tsx`에서 `@message/page.tsx`를 import해서 사용하는 방법

해당 방법은 가능합니다. 다만, 이 방법은 default.tsx가 기본적으로 실제 사용자가 정의한 페이지의 역할을 대신하게 만드는 것이므로, 패러렐 라우트의 기본적인 방향성과는 약간 달라질 수 있습니다. 패러렐 라우트의 활용 목적에 따라 이러한 구조가 적절하다면 사용 가능하지만, 구조의 명확성을 위해서는 페이지 컴포넌트와 기본 폴백 컴포넌트를 구분하여 관리하는 것이 좋습니다.

3. 컴포넌트로 메시지 창을 만들고 인터셉팅

이 방법도 적절할 수 있습니다. 메시지 창을 별도의 컴포넌트로 만들고, 인터셉팅을 통해 관리하면 메시지 창을 보다 유연하게 여러 위치에서 사용할 수 있습니다. 특히, 사용자 액션에 따라 메시지가 나타나거나 사라지게 해야 한다면 인터셉팅을 통한 접근이 유리할 수 있습니다.

결론 및 제안

페러렐 라우트를 사용할 때, 각 섹션에 대한 명확한 역할과 사용 목적을 정리하는 것이 중요합니다. 현재 구조에서 필요한 부분은 layout.tsx에서 message props가 올바르게 전달되고 있는지, 그리고 해당 props가 의도대로 화면에 렌더링되는지 확인하는 것입니다.

지금과 같은 문제를 겪으신 분들을 위해 다음과 같은 질문들을 읽어보시면 도움이 될 수 있습니다:
- “패러랠 라우트에서 404 가 발생한 이유를 제가 재대로 이해했는지 궁금합니다.”
- “Parallel Routes에 대하여 질문있습니다.”

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

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