인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

zxcvbmm's profile image
zxcvbmm

asked

Next + Create a SNS service with React Query

Interception Route

인터셉팅 했을 때 children에 들어가는 것 원리를 모르겠습니다.

Written on

·

458

·

Edited

0

인터셉터 전

/

modal : /@modal/default.tsx

children : /page.tsx

/i/flow/login (링크 클릭)

modal : /@modal/i/flow/login/page.tsx

children : /i/flow/login/page.tsx

/i/flow/login (직접 접속)

modal : /@modal/i/flow/login/page.tsx

children : /i/flow/login/page.tsx  

 

인터셉터 후

/

modal : /@modal/default.tsx

children : /page.tsx

/i/flow/login (링크 클릭)

modal : /@modal/(.)i/flow/login/page.tsx

children : /page.tsx

/i/flow/login (직접 접속)

modal : /@modal/default.tsx

children : /i/flow/login/page.tsx 

 

 

인터셉터와 패러렐 각각은 이해를 했습니다. 패러렐은 위에 적어놓았고,

인터셉터만 적용했다면 /i/flow/login (링크 클릭) 했을 때 {children}에 /(.)i/flow/login/page.tsx가 들어갔을테고,

/i/flow/login (직접 접속) 했을 때 /i/flow/login/page.tsx가 들어갔겠죠. 

 

/i/flow/login (링크 클릭) 했을 때 인터셉팅 동시에 패러렐이기 때문에 {modal}에 /@modal/(.)i/flow/login/page.tsx이 들어갑니다.

그런데.. {children}에는 왜 /page.tsx가 들어가는지 모르겠습니다. 반대로, "그렇다면 왜 /page.tsx가 들어가면 안 되는데?" 이 질문에도 대답을 못하겠습니다 ㅠㅠ;

그리고 /i/flow/login (직접 접속) 했을 때도 {modal}이 왜 /@modal/default.tsx인지 모르겠습니다.  

reactnext.jsreact-querynext-authmsw

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

두 가지만 기억하시면 됩니다.

  1. 인터셉팅 라우트는 해당하는 slot이 아닌 다른 페이지(slot)를 바꾸지 않습니다.

  2. 직접 주소 접근 시에는 인터셉팅 라우트는 아무 영향이 없습니다.

그래서 인터셉팅 때도 modal에서 인터셉팅이 일어났기에 children은 그대로인 것이고, 직접 접근 시에는 인터셉팅 라우트 자체가 무시돼서 @modal의 default가 실행됩니다.

zxcvbmm님의 프로필 이미지
zxcvbmm
Questioner

( ᵕ̩̩ㅅᵕ̩̩ )

zxcvbmm's profile image
zxcvbmm

asked

Ask a question