Next.js 13버전 이후로 달라진 useRouter에 대해서 알아보겠습니다.

useRouter

Next.js는 버전 13부터 라우팅 시스템에 몇 가지 중요한 업데이트를 제공했습니다. 이 중에서도 특히 useRouter 훅의 사용 방법이 크게 바뀌었는데요, 이 포스트에서는 그 변경 사항들과 useRouter 훅을 어떻게 사용할 수 있는지 살펴보겠습니다.

Next.js 13부터는 기존 Pages Router 방식 대신 새로운 App Router방식을 추천하고 있습니다.

The useRouter hook should be imported from next/navigation and not next/router when using the App Router

useRouter 후크는 App Router를 사용할 때 next/router가 아니라 next/navigation에서 가져와야 합니다

그리고 공식 문서에는 이렇게 App Router 방식을 사용할 때 next/navigation에서 import 할 것을 안내하고 있습니다.

useRouter 훅의 변화

import { useRouter } from 'next/router'

버전 13 이전에는 이렇게 next/router에서 import 하였습니다.

import { useRouter } from 'next/navigation'

그리고 버전 13 이후 App Router 사용 시 이렇게 next/navigation를 import 하고 있습니다. 그리고 기능면에서도 많은 변화가 생겼습니다. 기존의 next/router에서 제공되던 기능들이 여러 개별 훅으로 세분화되어 제공되기 시작했습니다.

Next.js 12 이하에서의 useRouter

Next.js 12 이하 버전에서 useRouter는 다음과 같은 방식으로 사용됐습니다.

import { useRouter } from 'next/router'

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

  // 경로명, 쿼리 파라미터, 라우팅 이벤트 등에 접근
  console.log(router.pathname, router.query)

  // 페이지 이동
  const goToDashboard = () => {
    router.push('/dashboard')
  }

  return <button onClick={goToDashboard}>Go to Dashboard</button>
}

useRouter 훅을 사용하면, 경로명(pathname), 쿼리 파라미터(query), 라우팅 이벤트 등 라우팅에 관련된 다양한 기능을 하나의 훅에서 접근할 수 있었습니다.

Next.js 13 이상에서의 변화(App Router)

Next.js 13에서는 useRouter 훅이 next/navigation에서 제공되며, 기존 useRouter에서 가능했던 여러 기능들이 개별 훅으로 세분화되어 제공됩니다.

useRouter

기본적인 페이지 이동과 관련된 기능을 제공합니다. 예를 들어, 페이지를 새로 고침하거나, 새 페이지로 이동하는 등의 작업입니다.

import { useRouter } from 'next/navigation'

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

  // 페이지 이동
  const goToDashboard = () => {
    router.push('/dashboard')
  }

  return <button onClick={goToDashboard}>Go to Dashboard</button>
}

usePathname과 useSearchParams

Next.js 13에서는 경로명과 쿼리 파라미터를 관리하기 위해 usePathname과 useSearchParams 훅이 도입되었습니다.

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

export default function Page() {
  const pathname = usePathname()
  const [searchParams, setSearchParams] = useSearchParams()

  // 경로명과 쿼리 파라미터에 접근
  console.log(pathname, searchParams.get('query'))

  // 쿼리 파라미터 업데이트
  const updateQuery = () => {
    setSearchParams({ query: 'new' })
  }

  return <button onClick={updateQuery}>Update Query</button>
}

이러한 변화는 코드의 가독성과 유지 보수성을 높이는 데 도움을 줍니다. 각 훅이 분명한 역할을 가지며, 필요한 기능에 따라 선택적으로 사용할 수 있게 되었습니다. 라우팅과 관련된 상태와 로직을 더 명확하게 분리할 수 있으며, 라우팅 시스템의 다양한 부분을 더 세밀하게 제어할 수 있게 되었습니다.

기존의 useRouter 훅이 제공하던 pathname, query 등의 기능을 사용하려면, 이제 usePathname, useSearchParams와 같은 새로운 훅들을 사용해야 합니다. 이는 개발자가 보다 선언적이고 직관적인 방법으로 라우팅 관련 로직을 작성할 수 있게 돕습니다.