Next #02 폴더구조

오 좋은데..?

일단 폴더 추가하고 page.tsx 파일을 넣어주기만 하면 라우트를 생성해준다니... 놀라운걸..

dashboard 폴더를 추가하고 page.tsx를 넣어서 확인하니

http://localhost:3000/dashboard

이렇게 바로 경로 이동이 된다.. 아주 편하고 좋군..

더 신기한 것은

dashboard 폴더 안에 [id] 이런 폴더를 추가하고 그 안에 page.tsx 폴더를 만드니 더 신기하게
id 라는 파라미터를 전달 할 수 있다. 오 굿...! 쿼리스티링까지 파라미터로 그냥 바로 받아 올 수 있는게 대박이다..

파라미터 받아오기

export default function DashboardDetailPage({ params, searchParams }){
    console.log(params);
    return (
        <div>DashboardDetailPage {params.id} code={searchParams.code}</div>
    )
}

layout.tsx

나는 layout.tsx 에 코드를 넣지도 않았는데 자동으로 코드들이 생기는 것을 볼 수 있다.
그렇다면 return 부분에 div태그를 하나 추가 해보자.
경로와 상관없이 계속 같은 위치에 보여지게 된다.
이 Layout은 header 나 Footer 같은 것을 Layout에 넣고 활용하면 좋을듯하다