next/router

next/router는 Next.js의 내장 Hook이며, 라우팅을 처리하는 데 사용됩니다. useRouter라는 React Hook을 제공하여, 애플리케이션 내에서 현재 라우트의 정보에 액세스하거나 라우트를 변경하는 데 사용할 수 있습니다.

장점:

1. 프로그래매틱 라우팅: next/router를 사용하면 코드 내에서 라우트를 변경할 수 있습니다. 즉, 사용자 인터랙션에 따라 동적으로 페이지를 변경할 수 있습니다. 이는 조건부 라우팅, 폼 제출 후의 리디렉션 등 다양한 상황에서 유용합니다.

2. 라우트 데이터 접근: useRouter Hook을 사용하면 현재 라우트에 대한 정보(예: 라우트 매개변수, 쿼리 매개변수 등)에 액세스할 수 있습니다. 이를 통해 동적 라우트를 구현하거나 쿼리 매개변수에 따라 UI를 변경하는 등의 작업을 수행할 수 있습니다.

단점:

1. 렌더링 비용: next/router를 사용하면 매 렌더링 때마다 라우트 객체가 새로 생성됩니다. 이로 인해 불필요한 리렌더링이 발생할 수 있습니다.

2. 복잡성 증가: next/router를 사용하면 리액트 컴포넌트 내에 라우팅 로직이 포함되므로 컴포넌트가 복잡해질 수 있습니다. 간단한 네비게이션의 경우 next/link가 더 간단하고 선언적일 수 있습니다.

다음은 next/router의 사용 예시입니다:

import { useRouter } from 'next/router'

function Page() {
  const router = useRouter()

  const handleClick = (e) => {
    e.preventDefault()
    // 페이지를 /about으로 변경
    router.push('/about')
  }

  return (
    <div>
      <button onClick={handleClick}>About</button>
      <p>Current route: {router.pathname}</p>
    </div>
  )
}

export default Page

위 예제에서는 useRouter Hook을 사용하여 현재 라우트의 정보에 액세스하고, 버튼 클릭에 따라 페이지를 변경합니다. 이와 같이 next/router는 사용자의 동작에 따라 프로그래밍 방식으로 라우트를 변경하는 경우에 유용합니다.