Next Parallel Routes(병렬라우트)

인프런 Next 강의를 들으며 신기했던 Intercepting  && Parallel  Routes  기능을 사용해서
modal창 기능을 구현하는 내용을 정리해 보았다.

Parallel  Routes 병렬 라우트

병렬 라우트를 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 
동시에 또는 조건부로 렌더링 할 수 있다고 한다.
예시 사진과 같이 team 및 analytics 페이지를 동시에 렌더링 할 수 있다.

개별적으로 스트리밍 되는 각 경로에 대해 독립적인 오류 및
로드 상태도 정의할 수  있으며 그에 따른 조건부 렌더링도 할 수 있음!

모달 창 구현해 보기 

모달을 구현할 때 문제 상황은 기존 레이아웃 위에 모달 레이아웃이 보여줘야 한다. 
폴더 구조로 본다면 다음과 같이 component 파일 안에 있는
loginModal 컴포넌트 파일을 상위 경로에 있는 layout 컴포넌트에서 보여줘야 한다.

여기서 병렬 라우트 기능을 적용시켜서 모달기능을 구현시켜 보자 

먼저 @modal이라는 폴더 안에 page파일을 만들고 loginModal 컴포넌트를 보여주고

@modal 파일의 디렉터리 위치와 같은 위치에 layout  파일에서는
props로 modal이라는 props를 받아 보여주면 된다!
이렇게 되면 병렬 라우트 기능이 적용된다!

 

여기서 문제는 현재 modal 컴포넌트를 을 다른 주소에서 발생시켜야 한다면?
home 경로에서 modal 창을 띄우는데 home은 /home 경로에 있고
modald은 i/flow/login이라는 주소에서 발생시켜야 한다는 상황에서
폴더 구조를 변경시켰다.

다음과 같이 문제시 layout에서 404 에러가 발생한다. 그 이유는 

Parallel routes는 명시적 슬롯(slots)을 사용하여 생성되는데. 슬롯은 
@folder 규약으로 정의되며, props 형태로 같은 레벨의 레이아웃으로 전달된다.
슬롯(@)은 경로 세그먼트가 아니므로 URL 구조에 영향을 주지 않으며,
@modal/i/flow/login 파일 경로는 /loign에서 연결할 수 있는 것 같다.
(parell Route 규칙?)

/경로에 있을 때 @modal/page를 불러왔지만 폴더 구조를 변경하면서 
@modal/i/flow/login/page로  폴더 구조가 바뀌어 404 에러가 발생한다.

즉 layout 파일에서는  @modal 바로 밑에 있는 page를 찾아서 
modal props으로 인식하고modal 컴포넌트를 띄어주는데
@modal 바로 밑에 경로에 page파일이 없어 404 에러가 발생한다?
(좀 어려운데 맞나?) 

NEXT Unmatched Route 내용 :

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#unmatched-routes

그래서 해결방안으로 @modal/i/flow/login 경로 바로 밑에 default 파일을 생성해

Null 값을 리턴하도록 만든다.

주소가 localhost:3000 일 때는 children -> page.tsx, modal=>@modal/default.tsx

해당 default.tsx를 작성하지않았다면 404 에러가 발생했다.

- 주소가 localhost:3000/i/flow/login 일 때는 children -> i/flow/login/page.tsx, modal -> @modal/i/flow/login/page.tsx

모달창이 잘 뜨긴 하는데 i/flow/login 주소해서 발생하다보니
뒤에 있는 배경이 기존에 있던  '/' 홈 레이아웃 위에 보여지지 않고
새로운 페이지에서 발생했다.
일단 여기까지는 Parallel  Routes 역할은 끝이고 '/' 루트에서

모달창을 띄울 방법은Intercepting Routes 라는 또 신기한 기능으로

구현해야하는데 다음 블로그로 정리해보겠다.

 

 

https://zoon-bloom.tistory.com/149

Next Intercepting Routes(라우트 가로채기)