[고급 라우팅 패턴]

Parallel Route

병렬 라우트

하나의 화면안에 여러개의 페이지를 병렬로 함께 렌더링

폴더구조
parallel
	- @feed
    	- setting
        	page.tsx
        - page.tsx
	- @sidebar
    	- page.tsx
    - layout.tsx
    - page.tsx

@sidebar 와 같이 @ 붙은 형식을 Slot 이라 부름
병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더
여기서 선언된 page.tsx 는 부모 layout.tsx 의 props 로 전달됨

export default function Layout({
	children,
  	sidebar
}:{
	children: ReactNode;
    sidebar: ReactNode;
}) {
	return (
    	<div>
    		{children}
      		{sidebar}
    	</div>
    )
}

// /parallel 경로 접근 시
{@feed 의 page.tsx}
{@sidebar 의 page.tsx}
{parallel 의 page.tsx}

// /parallel/setting 경로 접근 시
{@feed/setting 의 page.tsx}
{@sidebar/setting 의 page.tsx} // 없으면 @sidebar 에서 이전에 렌더링한 page.tsx
{parallel/setting 의 page.tsx} // 없으면 parallel 에서 이전에 렌더링한 page.tsx

그래서 <Link/> 태그가 아닌 직접 접속 시 이전에 렌더링한 page 가 없으므로 404 PageNotFound
이 경우 404 대신 각 Slot 폴더에 default.tsx 파일 생성해주면 이게 보여짐

Intercepting Route

인터셉팅 라우트

특정 경로 접속 시 원래 렌더링되어야 할 페이지가 아닌 우리가 원하는 페이지를 대신 렌더링

Link, Router.push 와 같은 메소드로 페이지 이동 시에만 적용됨

app
	- (.)book/[id]
    - book/[id]

(경로) 을 붙임으로써 가로채라
여기서 (.)book/[id] 는 동일한 경로에 있음을 의미

만약 Modal 형식을 위해 인터셉팅 라우팅을 적용한다면,
해당 (.)book/[id] 의 page.tsx 가 백그라운드 배경으로 띄어짐
원래 탐색하고 있던 페이지가 병렬로 함께 백그라운드 배경으로 설정되어야함
(병렬 + 인터셉팅)

app
	- @modal
    	- book/[id]
        	- page.tsx
        - default.tsx
    - book/[id]
    	- page.tsx
    - layout.tsx
    
// layout.tsx
export default function Layout({children, modal}){
	return (
    	<>
        	// book/1 경로 접근 시
        	{children} // book/1 은 intercepting route
            		   // children 도 결국엔 병렬라우팅처럼 동작하므로 이전 페이지인 page.tsx 나타남
            {modal}    // @modal/book/1
        </>
    )
}