들어가기 앞서
nextjs 프로젝트를 진행하면서 url의 파라미터를 이용해서 모달창을 띄우곤 했다. 예를 들어 'www.kang.com?modal=true' 이런식으로 접근해서 url의 프로퍼티 값을 빼낸뒤 true니까 modal 창을 띄우는 작동방식으로 코드를 구현했다. 그러다 보니 과연 이것말고 더 좋은 방법이 있을텐데 하고 문서를 들여다보니 parallel과 intercepting routes의 개념이 있었다. 이러한 개념을 알기 전에 다음의 용어부터 짚고 넘어가자.
Soft Navigation
어플리케이션이 활성화된 상태에서 Link, Router통해 페이지가 바뀌는것을 의미한다.
Hard Navigation
전체 페이지가 새로고침 되는 경우이다. (ex. URL을 통한 접속, 새로고침 등)
Intercepting Routes
현재 layout.tsx에서 다른 부분의 route를 사용할 수 있게 해주는 기능이다. 유저에게 다른 context로 이동하지 않으면서 보여줄 때 유용한 방식이다. 예를 들어 app/photo/[id]/page.tsx를 다른 라우트에서intercepting 하고 싶을 때는 app/feed/(..)photo/[id]/page.tsx를 하면 된다. 이때 (..)의 표기법은 바로 다음에서 설명하겠다.
Convention
- (.) 같은 레벨의 segment와 일치한다.
- (..) 한단계 위의 segement와 일치한다.
- (..)(..) 두단계 위의 segment와 일치한다.
- (...) app 디렉토리로부터의 기준에서 일치한 segment를 찾는다는 뜻이다.
병렬 라우트(Parallel Routes)
병렬 라우트는 같은 세그먼트 layout.tsx에서 동시에 2개 이상의 페이지를 렌더링 해주는 기능이다.
Slots
병렬 라우트는 Slots에 의해서 생성되는데 @folder 형식으로 정의되어진다. 이러한 slots은 slot과 같은 레벨에 있는 layout.tsx에게 prop형태로 전달되어진다.
위와같이 표기하면 layout.tsx에다가 children뿐만 아니라 modal, feed도 prop로 받아와 처리할 수 있다. (사실 layout.tsx children에 같은 레벨의 page.tsx가 들어가는데 이때 page.tsx도 사실 @children/page.tsx라고 생각하면 된다.)
주의할점은 @folder형태 즉 Slots는 라우트 세그먼트가 아니기 때문에 URL에 영향을 주지는 않는다.
즉 위의 폴더구조를 봤을때 https://localhost:3000/@feed에서 @feed는 라우트 세그먼트가 아니기 때문에 https://localhost:3000 다음과 같다.
각각의 병렬 라우트 안에는 로딩과 에러를 처리할 수 있다.
위와 같은 사진에서 @modal/loading.tsx, @modal/error.tsx를 사용해서 로딩과 에러를 처리할 수 있다.
병렬 라우트에서 default.tsx
default.tsx는 fallback으로 렌더링이 되는데 만약 페이지가 초기로드나 리로드가 진행이 될때 slot과 부합하지 않는 라우트에 대한 fallback으로 렌더링이 된다.
위와 같은 폴더 구조가 있을때 localhost/setting로 soft navigation으로 이동하면 @analytics/page.js가 반영된다. 만약 여기서 hard navigation으로 이동하면 각 슬롯에 default.js가 없으면 404 에러가 발생한다. children도 암묵적인 slot이기 때문에 default.js를 설정 안하면 예외를 발생한다.
Parallel route와 intercepting route를 활용한 로그인 모달창 만들기
위와 같은 파일구조를 보면 @modal을 이용해 병렬라우트를 생성한다. 병렬라우트를 생성하는 목적은 modal창을 현재 페이지와 함께 보이기 위해서이다. 하지만 로그인 버튼을 눌렀을 때
<Link href='/login/signIn'>즉 위와 같은 링크를 눌렀을때 로그인창이 나오게 하고 싶은 것이 목적이니까 @modal이 /login/signIn을 가로채면 로그인 모달창이 나오게 할 수 있다.
그리고 Hard Navigation이 일어날때는 @modal 안에 있는 경로가 아닌 원래 경로인 /login/signIn으로 가게 된다. 그리고 @modal안에 default.tsx를 설정을 안해주면 병렬 라우트니까 위의 폴더 구조와 같이 (.)login라우트가 실행이 안되면 내보낼 컴포넌트가 없기 때문에 에러가 발생한다. 그래서 default.tsx를 설정해서 에러를 해결 해줘야한다.
