목표
Next 공식 문서의 내용에 따라
기존 구조에 대한 변경 없이 segment를 재사용하는 방법을 소개한다.
내용
서론
segment A에 대한 정의를 마쳤는데,
공교롭게도 segment B에서 A의 극히 일부를 참조할 필요가 생겼다고 해보자.
Component 수준의 참조라면 code 분할이 귀찮긴 해도 재사용은 가능하겠지만,
Layout까지 포함한 결과가 필요하다면 대규모 구조 개편이 필요하여 곤란하다.
Intercepting Route는 자신보다 상위 수준의 segment를 참고할 수 있도록 돕는다.
즉, Route Tree에서 자식 Segment가 부모를 참조할 수 있도록 역행하는 것이다.
본론
Intercepting routes는 파일 시스템에서의 상대 경로처럼
부모 또는 조상에 존재하는 다른 segment를 현재 레이아웃에 불러온다.
앞서 서론에서는 리펙토링과 재사용성의 개발 편의성(DX) 관점에서 얘기했지만,
UX 관점에서도 추가적인 Navigation 없이 필요한 내용을 볼 수 있는 장점이 있다.
Convention
상대 경로와 같은 규칙처럼 폴더에 (..)를 사용하면 된다.
- (.) 동일한 수준의 segment 참조
- (..) 한 단계 상위(부모) segment 참조
- (..)(..) 두 단계 상위(조상) segment 참조
- (...) 루트 segment 참조
앞선 시리즈에서 다룬 Parallel Routing에서의 Modal 예제를 참조하면 다음과 같이 활용할 수 있다.
위와 같은 구조에서는 /feed를 통해 /feed/photo/123에 접근하게 되면
내부적으로 Modal 형태로 보여지게 되고,
/photo/123를 통해 접근하게 되면 하나의 페이지로 렌더링된다.
Parallel Routing을 활용한 위와 같은 패턴은 다음과 같은 이점을 갖는다.
- 경로 접근 방식에 따라 콘텐츠가 바뀌지 않고, 동일한 경로에 대해 동일한 콘텐츠를 제공할 수 있다.
- 1과 같은 맥락으로, 새로고침 하더라도 상태가 보존되고, 모달 창이 닫히지 않는다.
- 1,2에서 동일 URL에 대한 상태 보존 덕분에 상위 segment를 참조하는 라우팅 없이도, 그냥 뒤로 가기(Navigation)을 통해 Modal을 닫을 수 있다.
- 3과 같은 맥락에서 앞으로 가기(Navigation)하면 모달을 다시 열 수 있다.
위 예제에서 photo 세그먼트에서 (..)(..) 대신 (..)를 사용했음에 주의하자. @modal은 segment가 아니라 slot이므로 Route tree에 영향을 주지 않는다.
다음 단계
Route Handlers 기능을 활용하여
특정 segment에서의 Routing 규칙을 정의할 수 있다.
시리즈
Terminology
Defining Routes
Pages and Layouts
Linking and Navigating
Route Groups
Dynamic Routes
Loading UI and Streaming
Error Handling
Parallel Routes
Intercepting Routes
Route Handlers
Middleware
Project Organization
Internationalization
