패러렐 라우트와 인터셉터 라우트

만들려는 기능

1. 모달을 띄웠는데, 이전 페이지가 유지되고 주소가 바뀐다.
2. 로그인 버튼을 누르면 "/login"으로 갔다가 "/i/flow/login"으로 리다이렉팅 된다.
3. 패러렐 라우트와 인터셉터 라우트를 이용해서 구현한다.

---

패러렐 라우트

• Parellel은 병렬이라는 의미를 가지고 있다.
• 즉, Parallel Route는 병렬 라우트로 해석할 수 있고, 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다.
• 패러렐 라우트는 뒤에 화면이 남아있으면서 모달을 띄우고 주소를 변경할 수 있는 기능이다.

폴더 구조

app/(beforeLogin)/layout.tsx

import {ReactNode} from "react";
import styles from '@/app/(beforeLogin)/_component/main.module.css';

type Props = { children: ReactNode, modal: ReactNode };
export default function Layout({ children, modal }: Props) {
  return (
    <div className={styles.container}>
      {children}
      {modal}
    </div>
  )
}

• 같은 폴더의 layout.tsx에 modal을 props로 받아온다.
• 패러렐 라우트를 사용하려면 page.tsx와 layout.tsx가 있어야 한다.
  • page.tsx는 children에 렌더링
  • @modal은 modal에 렌더링

일단은 (.)i를 i라고 생각하면 됨

• 렌더링 분석
  • 주소가 localhost:3000 때는, children -> page.tsx, modal -> @modal/default.tsx
  • 주소가 localhost:3000/i/flow/login 때는, children-> i/flow/login/page.tsx, modal -> @modal/i/flow/login/page.tsx
• default.tsx
  
  • default.tsx는 패러렐 라우트에 대한 기본값이며, 패러렐 라우트가 필요 없는 부분에서 사용

export default function Default() {
  return null;
}

굳이 보여줄 게 없어서 null을 return

• 만약 모달을 여러 개 사용하고 싶으면?

1. @modal2 같은 폴더를 하나 더 추가하고
2. layout.tsx에 modal2를 등록하면 된다.

---

인터셉터 라우트

• 인터셉터 라우트를 사용하면 서로 주소가 다른데 같이 화면에 띄울 수 있다.
• ()을 사용하여 구현할 수 있다.
  • (.)이면 상위 폴더, (..)이면 (.)의 상위 폴더이다.
  • 즉, import 할 때 사용하는 주소와 같다고 보면 된다.
  • ()는 주소창에 관여하지 않음
• 기능에 대입하여 설명
  1. 로그인 버튼을 누르면 "/login"으로 가고
  2. "/login"에서 "/i/flow/login/page.tsx"로 가야 하는데, (.)로 인터셉팅해서 "/(.) i/flow/login/page.tsx"로 간다.
  3. 그렇지만 "/(.)i/flow/login/page.tsx"는 패러렐 라우트이자 인터셉터 라우터라서 children에 그려지는 게 아니라 modal에 그려져서 뒷 배경에 페이지를 두고 모달이 띄워지면서 url이 바뀐다.
  4. 그리고 상단 영상처럼 구현하려면 “/”에서 로그인 버튼 누르면, “/” ⇒ “/login” ⇒ “/i/flow/login”으로 가서 “/”이랑 “/login”이 같아야 함
• 그러면 인터셉팅 되는데 그냥 "/i/flow/login/page.tsx"는 필요 없는 거 아니야?
  • 새로고침하면 (.)/i/flow/login/page.tsx 대신 i/flow/login/page.tsx로 가기 때문에 필요하다.
  • 정리
    • "i/flow"는 브라우저로 직접 접근하거나 새로고침을 눌렀을 때 사용
    • "(.)i/flow"는 다른 페이지에서 링크를 통해서 접근하면 사용
    • 결국 이 프로젝트에서는 "i/flow"와 "(.)i/flow"의 파일 내용이 완벽하게 같다.
• private 폴더
  • 위에서 "i/flow"와 "(.)i/flow"의 파일 내용이 완벽하게 같으니까 컴포넌트화 할 필요가 있다.
  • _를 앞에 붙여서 만들면 private 폴더를 생성할 수 있고, 주소창에 관여하지 않는다.

private 폴더

---

주소창에 관여하지 않는 폴더 구조

1. () 그룹 폴더(주로 레이아웃 구분 시 사용)
2. @를 사용하는 패러렐 라우트
3. _를 붙이는 private 폴더(폴더 정리용)

---

출처

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

Next + React Query로 SNS 서비스 만들기 강의 - 인프런