useRouter

Next.js에서 useRouter 훅

• 라우터 객체에 접근하여 현재 페이지의 경로, 쿼리 파라미터, 동적 라우팅 등과 관련된 정보를 얻고, 프로그래밍 방식으로 페이지 이동을 처리

• 주의!! App Router(app/)를 사용할 때 useRouter 대신 next/navigation 모듈에서 가져와야 함

주요 속성 및 메서드

• 속성
1. pathname: 현재 페이지의 경로를 나타내는 문자열입니다.
(ex. /about 페이지에 있을 경우 "/about"을 반환)
2. query: 현재 경로의 쿼리 파라미터를 포함하는 객체입니다.
(ex. /post?pid=123의 경우 { pid: '123' }을 반환)
3. asPath: 쿼리 문자열을 포함한 브라우저에 표시되는 실제 경로입니다.
(ex. /post?pid=123이면 "/post?pid=123"을 반환)
4. route: 매칭된 라우트 패턴을 나타내며, 동적 경로에서 유용
(ex. /post/pid와 같은 패턴을 반환)
5. isFallback: 동적 경로에서 getStaticPaths와 함께 사용될 때, 페이지가 fallback 모드인지 여부를 나타내는 불리언 값

• 메서드 1. push(url, as, options): 새로운 페이지로 이동. 브라우저의 히스토리에 새로운 항목이 추가.
1. replace(url, as, options): 현재 페이지를 새로운 페이지로 교체. 브라우저 히스토리에 추가 x
2. back(): 브라우저 히스토리에서 이전 페이지로 이동
3. prefetch(url): 지정된 경로에 대해 미리 데이터를 가져옴. 이는 클라이언트 사이드 네비게이션이 더 빠르게 이루어지도록 도와줌

동적 라우팅 예시

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { pid } = router.query; // URL에서 pid 값을 가져옴

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

• redirect(url) ⇒ 훅(useRouter) 사용없이 리다이렉트

• notFound() ⇒ 404페이지로 이동