Next.js 14 시작하기 #11 useRouter

강의 21

useRouter

• 버튼 혹은 링크를 클릭 했을 때, 특정한 기능이 수행되면서 원하는 페이지로 이동하기 쉽게 하기 위해 useRouter라는 훅을 사용함
• 해당 훅을 사용하면 함수형 컴포넌트에서 Next.js 라우터의 기능을 사용할 수 있음

// app/order-place/page.js

'use client'

import { useRouter } from "next/navigation";

export default function OrderProduct() {
  const router = useRouter()
  
  const handleClick = () => {
    console.log("placing your order");
    router.push('/');
  }
  
  return (
    <>
      <h1>Order Product</h1>
      <button onClick={handleClick}>Place order</button>
    </>
  )
}

/order-place 페이지는 place order 버튼을 클릭 시 placing your order가 콘솔창에 출력되면서 / 페이지로 사용자를 이동시키는 페이지이다.
이와 같이 useRouter는 클라이언트 컴포넌트에서 사용 가능한(클라이언트와 상호작용을 통해 작동하므로) 간편한 라우팅 기능을 가졌으며 push(path)외에도 replace(path), back(), forward() 같은 메서드를 가지고 있음

• push(path) : 지정된 경로로 클라이언트 사이드 라우트 이동을 함
• replace(path) : push와 비슷하지만 히스토리 스택에 새로운 엔트리를 추가하는 것이 아니라 현재 엔트리를 대체함
• back() : 히스토리 스택에서 한 단계 뒤로 이동
• forward() : 히스토리 스택에서 한 단계 앞으로 이동