프로그래밍 방식의 라우팅

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 35번째.

<Link>는 사용자가 선택한 이동을 담당합니다. 하지만 때로는 앱이 직접 결정하기도 합니다. 폼 제출 후, 로그인 성공 후, 또는 먼저 처리해야 할 작업이 있는 버튼을 클릭한 후처럼 말이죠.

이러한 경우에는 useRouter를 사용하여 코드에서 이동합니다:

'use client';

import { useRouter } from 'next/navigation';

export default function CheckoutButton() {
    const router = useRouter();

    return (
        <button onClick={() => router.push('/thanks')}>
            Check out
        </button>
    );
}

router 객체는 다음을 제공합니다:

router.push(url): 해당 URL로 이동하며, 기록(history)에 추가합니다
router.replace(url): 현재 항목을 대체하며 이동합니다 (이전으로 돌아갈 수 없음)
router.back(): 한 단계 뒤로 이동합니다
router.refresh(): 현재 라우트의 서버 렌더링을 다시 실행합니다

기억해야 할 두 가지 규칙이 있습니다. 첫째, useRouter는 이전의 next/router가 아닌 next/navigation에서 가져옵니다. 둘째, useRouter는 훅(hook)이므로 'use client'가 필요합니다.

일반 링크로 충분할 때는 링크를 사용하세요. <a> 태그로 동작하므로 키보드, 스크린 리더, 마우스 가운데 클릭에서도 잘 작동합니다. 탐색(navigation)이 탐색 그 자체 목적이 아니라 어떤 동작의 결과일 때 router.push를 사용하세요.

챌린지

쉬움

홈페이지에 아무런 동작도 하지 않는 "Order now" 버튼이 있습니다. 이 버튼이 페이지를 이동하도록 만드세요.

components/OrderButton.jsx에서 useRouter()를 사용해 router를 가져옵니다.
클릭 시 router.push를 사용하여 사용자를 /menu로 이동시킵니다.

버튼의 id="order-btn" 속성은 그대로 두세요. 테스트에서 이 버튼을 클릭합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}