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

방황하는물고기님의 프로필 이미지

작성한 질문수

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

인터셉팅 라우트

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

작성

·

395

·

수정됨

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인지 모르겠습니다.  

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

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

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

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

( ᵕ̩̩ㅅᵕ̩̩ )