[z.com] next.js 13 hook 알아보기

채연·2023년 12월 27일

z.com

목록 보기

10/18

z.com 하면서 저번엔 useSelectedLayoutSegment를 알아봤었다.

이번에는 usePathname을 사용하였는데,
또 무슨 훅이 있을지 궁금해서 공식문서를 파헤쳐보도록 하겠다!

usePathname

usePathname은 클라이언트 구성 요소 훅으로 현재 URL의 경로 이름을 읽을 수 있습니다.

사용법

const pathname = usePathname()

예시

내가 '/'에 있다면, pathname 은 '/'
내가 '/dashboard'에 있다면, pathname은 '/dashboard'
내가 '/dashboard?v=2'에 있다면, pathname은 '/dashboard'
내가 '/blog/hello-world'에 있다면, pathname은 '/blog/hello-world'

설명

위의 예시를 보면 알다시피 '/'부터 쿼리스트링 전까지의 URL을 가져와줍니다.

useParams

useParams는 현재 URL로 입력된 경로의 동적 매개변수를 읽을 수 있는 클라이언트 구성요소 훅입니다.

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)
 
  return <></>
}

사용법

const params = useParams()

예시

설명

동적 라우팅인 값들을 받아올 수 있습니다.
app/shop/[categoryId]/page.js 면, /shop/1로 접속했을 때 {categoryId: 1}의 값으로 받아오게 됩니다.

여러 개인 것도 마찬가지로
app/shop/[categoryId]/[postId]/page.js 면, /shop/1/2로 접속했을 때 {categoryId: '1', postId: '2'}로 나옵니다.

만약 여러 개를 받는 [...slug]일 경우엔 { slug: ['1', '2'] } 이와 같이 배열의 값으로 나타납니다.

useRouter

useRouter 훅을 사용하면 클라이언트 구성요소 내부의 경로를 변경할 수 있습니다.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

사용법

const router = useRouter()

router.push(href: string, {scroll: boolean }): 제공된 경로에 대해 클라이언트 측 탐색을 수행합니다. 브라우저의 기록 스택에 새 항목을 추가합니다.

router.replace(href: string, {scroll: boolean }): 브라우저의 히스토리 스택에 새 엔트리를 추가하지 않고 제공된 경로에 대해 클라이언트 측 탐색을 수행합니다.

router.refresh(): 현재 경로를 새로 고칩니다. 서버에 새 요청을 하고, 데이터 요청을 다시 가져오며, 서버 구성 요소를 다시 렌더링합니다. 클라이언트는 영향을 받지 않는 클라이언트 측 React(예: useState) 또는 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 React Server Component 페이로드를 병합합니다.

router.prefetch(href: string): 클라이언트 측 전환 속도를 높이기 위해 제공된 경로를 미리 설정합니다.

router.back(): 브라우저의 히스토리 스택에서 이전 경로로 다시 이동합니다.

router.forward(): 브라우저의 히스토리 스택에서 다음 페이지로 이동합니다.

예시

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button
      type="button"
      onClick={() => router.push('/dashboard')}
    >
      Dashboard
    </button>
  )
}

추가사항

기본적으로 Next.js는 새 경로로 이동할 때 페이지 맨 위로 스크롤합니다. 이 동작은 false to router.push() 또는 router.replace()로 스크롤하여 비활성화할 수 있습니다.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button
      type="button"
      onClick={() => router.push('/dashboard', { scroll: false })}
    >
      Dashboard
    </button>
  )
}

useSearchParams

useSearchParams는 클라이언트 구성 요소 후크로 현재 URL의 쿼리 문자열을 읽을 수 있습니다.

useSearchParams는 URLsearchParams 인터페이스의 읽기 전용 버전을 반환합니다.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}