[Next.js] parallel route, default page, intercepting route

insung·2024년 6월 16일

Nextjs

목록 보기
8/21

parallel 라우트

  • 폴더명 앞에 @를 붙여 사용
    • 한 화면에서 여러개의 page를 동시에 보여주는 방법 중 하나
    • layout시 {children}에 보여지는게 아닌 { 폴더명 } 에 보여지게 됨
    • 참고로 @를 붙인 폴더도 경로에 영향을 안준다 (group과 같음)

default.tsx

  • page.tsx에 만들 내용이 없는 경우엔 default로 만드는게 더 낫다
    • 보통 parallel 라우트시엔 page대신 default를 씀 (넣을내용이 없기 때문!)

Interceptiong 라우트

  • 서로 주소가 다른데 여러 페이지를 띄울 수 있는 방법
    • 클라이언트에서 라우팅 할때만 인터셉트 라우팅이 적용됨에 유의
      • 클라이언트 컴포넌트에서 링크를 통해 경로를 이동해야 인터셉트 됨
    • 폴더명을 (..)이름 또는 (.)이름로 이름 지어 사용
    • (..)이름 주소명 상에 부모를 기준, (.)는 현재 주소의 파일명을 기준으로 페이지를 가로챔
      • 새로 고침을 하게되면 원 경로의 page가 표시됨을 유의
      • 그렇기 때문에 (..)으로 가로채는 page와 정상적인 경로상의 page의 내용이 동일하게 만들어야 새로고침시 같은 페이지 내용을 표시한다
profile
안녕하세요 프론트엔드 관련 포스팅을 주로 하고 있습니다

0개의 댓글