MouseNext/AppRouter - 1. 페이지 라우팅,Layout

컴포넌트

AppRouter의 컴포넌트는 특정 폴더 내부의 page.tsx로 만들 수 있다.

// app/search/page.tsx
export default function Page() {
	return <div>Search 페이지</div> 
}

쿼리스트링

localhost:3000/search?q=seach 같은 쿼리스트링은 page내의 props.searchParams를 확인해 얻을 수 있다.

export default async function Page({searchParams} : {searchParams: Promise<{q:string}>}) {
  	const {q} = await searchPrams
 	return <div>Search 페이지 : {q}</div> 
}

url 파라미터

localhost:3000/book/1 , book/2 같은 파라미터는 page내의 props.params를 확인해 얻을 수 있다.
[...id], [[...id]] 모두 동일하다

// app/book/[id].tsx
export default async function Page({params} : {params: Promise<{id:string}>}) {
  	const {id} = await params;
 	return <div>Book 페이지 : {id}</div> 
}

layout

layout.tsx는 해당 폴더를 감싸는 파일이다. 또한 /search/setting 경로에도 포함이 되며 /search/setting/layout.tsx를 만들면 2중으로 layout이 설정된다.

import {ReactNode} from "react";

export default function Layout({children} : {children: ReactNode}) {
 	return (
      <>
   		<div>임시서치바</div>
      	{children}
	  </>
	)
}

라우트그룹

() 이런식으로 소괄호로 감싸진 폴더 이름을 라우트그룹 이라고 한다 ex)(with-searchBar)
이러한 라우트 그룹에 있는 layout은 해당 폴더 내부에 있는 tsx 파일에만 layout을 적용한다는 특징이 있다. 그렇기 때문에 특정한 경로에만 layout을 넣고 싶을 때 사용한다.