App Router: useRouter

 Next.js 는 지속적으로 발전하는 React 기반 웹 프레임워크입니다. 최근 버전에서 라우팅 시스템에 큰 변화가 있었습니다. 이 블로그 포스트에서는 Next.js의 새로운 라우팅 시스템, 특히 useRouter의 대체제인 usePathname, useSearchParams, useParams 그리고 useRouter의 주요 메서드들에 대해서도 자세히 알아보겠습니다.

 

 

 

 

 

1. useRouter 란?

useRouter는 Next.js에서 제공하는 훅 중 하나로, 현재 페이지의 라우터 정보에 접근할 수 있게 해줍니다. 이를 통해 URL의 정보를 얻거나, 프로그래밍 방식으로 페이지 간 이동을 할 수 있습니다. 

 

⭐⭐⭐⭐⭐  

 useRouter는 오직 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포넌트에서는 redirect 함수를 사용해야 합니다.

 

 

 

 

 

 

 

 

2. useRouter 사용하기

useRouter를 사용하려면 먼저 Next.js의 next/navigation 에서 import 합니다.

import { useRouter } from 'next/navigation'

function MyComponent() {
  const router = useRouter()
  
  // router 객체 사용
}

 

 

 

 

 

 

2-1. useRouter의 주요 메서드

 

• router.push(url, options): 새 URL로 이동합니다.

router.push('/about')

 

 

• router.replace(url, options): 현재 히스토리 항목을 대체하며 새 URL로 이동합니다.

router.replace('/dashboard')

 

 

• router.back(): 브라우저 히스토리에서 이전 페이지로 이동합니다.

router.back()

 

 

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

router.forward()

 

 

• router.refresh(): 현재 페이지를 새로고침합니다.

router.refresh()

 

 

• router.prefetch(url, options): 지정된 페이지를 미리 로드합니다.

router.prefetch('/products')

 

 

 

 

 

 

 

 

 

 

3. 기타 새로운 라우팅 관련 훅들

 

• usePathname: 현재 페이지의 경로를 얻을 수 있습니다.

import { usePathname } from 'next/navigation'

function MyComponent() {
  const pathname = usePathname()
  console.log(pathname) // 예: '/blog/my-post'
}

 

 

• useSearchParams: URL의 쿼리 파라미터에 접근할 수 있습니다.

import { useSearchParams } from 'next/navigation'

function MyComponent() {
  const searchParams = useSearchParams()
  const query = searchParams.get('query')
  console.log(query) // 예: URL이 '/search?query=nextjs'일 경우 'nextjs' 출력
}

 

 

• useParams: 동적 라우트 파라미터에 접근할 수 있습니다.

import { useParams } from 'next/navigation'

function MyComponent() {
  const params = useParams()
  console.log(params) // 예: 경로가 '/blog/[slug]'이고 현재 URL이 '/blog/my-post'일 경우 { slug: 'my-post' } 출력
}

 

 

 

 

 

 

 

 

 

 

 

4. 실제 사용 예제

import { useRouter, useParams, useSearchParams, usePathname } from 'next/navigation'

function ProductPage() {
  const router = useRouter()
  const params = useParams()
  const searchParams = useSearchParams()
  const pathname = usePathname()

  const handleNextProduct = () => {
    const nextId = parseInt(params.id) + 1
    router.push(`/product/${nextId}`)
  }

  const handleGoBack = () => {
    router.back()
  }

  const handleRefresh = () => {
    router.refresh()
  }

  return (
    <div>
      <p>Current path: {pathname}</p>
      <p>Product ID: {params.id}</p>
      <p>Category: {searchParams.get('category')}</p>
      <button onClick={handleNextProduct}>Next Product</button>
      <button onClick={handleGoBack}>Go Back</button>
      <button onClick={handleRefresh}>Refresh</button>
    </div>
  )
}

export default ProductPage

 

이 컴포넌트는 /product/[id] 경로에 매칭되며, 현재 제품 정보를 표시하고 다음 제품으로 이동하거나, 이전 페이지로 돌아가거나, 페이지를 새로고침 하는 기능을 제공합니다.