[Next] Routing .01

안녕하세요. RyuWoong입니다.

이번 포스팅은 Routing에 관한 내용입니다.

Next는 CRA(Create React App)과 다른 방법인 파일 기반 라우팅을 지원합니다.

어떻게 다른지 한번 알아보러 가시죠!

---

Basic

Next.js에서는 파일 시스템 기반의 Router를 사용합니다.

이게 무엇이냐? Pages 폴더 내에 만든 폴더와 파일이 곧 Router 경로가 됩니다.

//일반적인 경로
pages/index.js → /
pages/blog/index.js → /blog

//중첩라우팅
pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

 

Dynamic Routing

파일기반이지만 다양한 기능을 제공합니다. Parmas를 사용할 수 있는데, 아래와 같이 사용하면 됩니다.

// pages/post/[pid].js  -> /post/1, /post/abc

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query // { "pid": "1" }, { "pid": "abc" }

  return <p>Post: {pid}</p>
}


export default Post

파일 명을 [pid].js로 설정하면, useRouter 훅을 통해 해당 router 정보를 불러 올 수 있고 router.query 내에 설정한 변수와 변수값을 확인 할 수 있습니다. 이외에도.

QueryString

/post/abc?foo=bar

// { "foo": "bar", "pid": "abc" }

Multiple Params

pages/post/[pid]/[comment].js -> /post/abc/a-comment

// { "pid": "abc", "comment": "a-comment" }

Catch All routes

pages/post/[...slug].js -> /post/a/b/c

// { "slug": ["a", "b","c"] }

 

같은 다양한 기능을 활용할 수 있습니다. Catch All routes 같은 경우 값이 배열인 점이 눈에 띄네요.

 

Navigation

Next.js에서 경로로 이동하려면 <Link> 태그를 이용하거나 useRouter 훅을 이용하여 이동할 수 있습니다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">Go to pages/post/[pid].js</Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">Also goes to pages/post/[pid].js</Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          Go to pages/post/[pid]/[comment].js
        </Link>
      </li>
    </ul>
  )
}

export default Home

// 아래와 같이 사용할 수도 있습니다.
/*
		<Link
          href={{
           pathname: '/post/abc',
            query: { foo: 'bar' },
         }}
       > 
		</Link>
*/

위와 같은 코드를 next.js에서 확인해보면 기존의 <a> 태그와 유사한 느낌을 받을 수 있습니다.

next.js에서 페이지를 이동하는 방법이며 <a> 태그는 외부링크로 이동하는 경우에만 사용합니다.

useRouter

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}

Link태그 외에 useRouter 훅을 이용하여 경로를 이동할 수 있습니다.

위 예제는 버튼을 클릭하면 상세페이지로 이동하는 기능을 구현한 코드입니다.

useRouter 훅을 이용하여 router 정보를 가져오고 router.push 메소드를 사용하여 페이지를 이동합니다.

그외에도 router는 아래와 같은 다양한 기능을 겸하고 있습니다.

// router Object
{
pathname : '현 주소 경로',
query: '현 주소 쿼리',
asPath: '브라우저 주소창에서 보여지는 주소',
isFallback: 'Fallback Mode 여부',
basePath:'basePath를 설정한 경우 basePath',
locale: 'locale을 설정한 경우 locale',
locales: '모든 지원하는 locales를 보여줍니다. String[]',
defaultLocale:'현재 기본 locales를 보여줍니다. String',
domainLocales:'구성된 도메인 locales를 보여줍니다. Array<{domain, defaultLocale, locales}>',
isReady: '라우터 필드가 클라이언트 측에서 업데이트 되고 사용할 준비가 되어 있는지 여부, useEffect 내부에서만 사용',
isPreview: '현재 미리보기 모드에 있는지 여부'
}

// router Method
push : 'History Stack에 주소를 넣는다. 해당 주소로 이동. 뒤로가면 링크로 이동하기전 페이지',
replace : '현재페이지를 해당 페이지로 교체함. 뒤로가면 링크로 이동하기전 보다 더 전 페이지',
prefetch: '사전에 해당 링크에 대한 요소를 준비 하도록 합니다. Link 태그를 사용하지 않는 경우 유용합니다.',
beforePopState: '라우터가 작동하기 전에 동작을 필요로 할때',
back : '뒤로가기 history.back()',
reload : '새로고침',


// router Event
routeChangeStart:'경로가 변경되기 시작 할 때',
routeChangeComplete:'경로가 완전히 변경 됐을 때',
routeChangeError:'경로 변경 시 오류가 발생하거나 경로 로드가 취소 됐을 때',
beforeHistoryChange:'경로가 변경되기 시작할 때',
hashChangeStart:'해쉬가 변경 시작했으나 페이지는 변경되지 않았을 때',
hashChangeComplete: '해쉬는 변경 되었으나 페이지가 변경되지 않았을 때'

이렇게 Nextjs에서의 Routing을 알아 봤습니다.

다음은 아주 중요한, Nextjs의 꽃 Data Fetching을 알아보겠습니다.

 

Routing에 관해 더 자세한 사항은 아래 참조 링크를 확인해주세요.

 

참조.

https://nextjs.org/docs/api-reference/next/router