Page 관리

🔴 Root Page (main Page)

Root 폴더/src( create할때 옵션으로 src를 쓸지말지 결정한다) / pages / index.tsx

🟡 간단한 페이지 이동 (static routing)

pages/index.tsx 코드 및 ui

export default function Home() {
  return (
    <>
      asd
      <h1>/pages/index.tsx</h1>
      <ul>
        <li>
          <a href="/sub">/pages/sub/index.tsx</a>
        </li>
        <li>
          <a href="/sub/1">/pages/sub/[as].tsx</a>
        </li>

        <li>
          <a href="/sub/2">/pages/sub/[as].tsx</a>
        </li>
      </ul>
    </>
  );
}

위에서 /sub 로 이동하게되면 sub폴더에 있는 index.tsx를 실행하게 된다. 따라서

위와 같이 pages 폴더 안에 sub 폴더를 생성하고, index.tsx 를 생성한다

/pages/sub/index.tsx 코드

export default function SubIndex() {
  return (
    <>
      <h1>/pages/sub/index.tsx</h1> <a href="/">/pages/index.tsx</a>
    </>
  );
}

여기까지는 간단하지만, sub/1 , sub/2와 같이 세부 항목 별 router 이동은 어떻게 할까

🟠 세부이동 (dynamic routing)

/pages/index.tsx 코드. 아래에서 a링크 href="/sub/1" 과 sub/2를 주목하면 된다.

export default function Home() {
  return (
    <>
      asd
      <h1>/pages/index.tsx</h1>
      <ul>
        <li>
          <a href="/sub">/pages/sub/index.tsx</a>
        </li>
        <li>
          <a href="/sub/1">/pages/sub/[as].tsx</a>
        </li>

        <li>
          <a href="/sub/2">/pages/sub/[as].tsx</a>
        </li>
      </ul>
    </>
  );
}

sub 폴더 아래에 [as] 라는 tsx파일을 생성해주었다.

/pages/sub/[as].tsx 코드

import { useRouter } from "next/router";

export default function SubIndex() {
  const router = useRouter();
  console.log(router);
  const id = Number(router.query.id);
  return (
    <>
      <h1>parameter id : {id}</h1> <h1>/pages/sub/index.tsx</h1>{" "}
      <a href="/">/pages/index.tsx</a>
    </>
  );
}

위와 같이 코드를 작성하면, a링크를 통해 sub/1 로 갔을땐 {id} 에 1이, sub/2로 갔을땐 {id}에 2가 찍히는 것을 볼 수 있다.

[as] 라고 파일을 저장했는데 [] 속의 as는 router.query 의 하위 속성으로 들어간다. 즉 [파일명].tsx 가 router.query의 하위 속성이름을 짓는 것이랑 똑같은 것이다. 브라우저에서 router정보를 console에 담게되면 아래와 같다.

query 부분에 as 를 key로 2라는 값이 들어간 객체가 생성되었다. 만약 파일명을 [ts].tsx로 변경한다고 하면 아래와 같다.

{id} 는 NaN이 나오게 되고 router의 console을 찍어보면 query속 객체의 key가 ts로 되어있는 것을 볼 수 있다.

🟣 static vs dynamic

만약 pages/sub 밑에 [~~~] 라는 파일이 있는 상황이면

주소창에서 /sub/asd 로 이동했을때 router.query.~~~ : asd 라는 형태로 나오게 되고, page는 [~~~].tsx의 리턴값을 띄우게 된다.

하지만 만약 sub폴더 밑에 temp.tsx 라는 파일이 있다고 치면

/sub/temp 라고 하면 [~~~].tsx로 이동할까? temp.tsx로 이동할까? 정답은 temp.tsx로 이동한다.

정적 페이지 라우팅과 동적 페이지 라우팅이 겹치면 정적 페이지 라우팅이 우선시 된다.

🟢 [...all]

pages/test/[...all].tsx 파일을 만들면

주소창에서 /test 이후에 어떤 routing을 또 만들던 [...all] 파일로 들어가게 된다. 단 하나. index.tsx만 빼고.

/test/alwdad/dawdalksf 도, /test/name=awdasd 도 전부 [...all].tsx 로 이동한다.

/test/ 경로만 pages/test/index.tsx 파일을 띄워주게 된다.