[Next.js] Next.js + TypeScript에서의 페이지 이동 방법 총정리
Next.js에서의 페이지 이동 방법 개요
Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.
- Link 컴포넌트 사용하기
- useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법
일반 React에서 사용하는 useNavigate나 React Router의 Link와 비슷한 역할을 한다고 생각하면 이해하기 쉽다.
두 방법 모두 클라이언트 사이드 라우팅을 지원하여 전체 페이지를 다시 로드하지 않고 페이지 간 빠른 전환이 가능하다.
이는 사용자 경험을 향상시키고 애플리케이션의 반응성을 높여준다.
Link 컴포넌트를 사용한 클라이언트 사이드 라우팅
Link 컴포넌트는 Next.js에서 가장 기본적인 페이지 이동 방법이다.
이 컴포넌트는 HTML의 <a> 태그를 확장한 것으로, 클릭 시 JavaScript를 사용하여 클라이언트 사이드 네비게이션을 수행한다!!
// app/page.tsx
import Link from 'next/link';
export default function HomePage() {
return (
<div>
<h1>홈페이지</h1>
<nav>
<Link href="/dashboard">대시보드로 이동</Link>
<Link href="/about">소개 페이지로 이동</Link>
<Link href="/blog">블로그로 이동</Link>
</nav>
</div>
);
}위 코드는 세 개의 링크를 생성하여 사용자가 각각 대시보드, 소개 페이지, 블로그 페이지로 이동할 수 있게 해준다.
Link 컴포넌트는 내부적으로 클라이언트 사이드 라우팅을 처리하여 페이지 전환 시 브라우저가 전체 페이지를 다시 로드하지 않도록 한다.
🚨중요한 점🚨은 Link 컴포넌트를 사용할 때 기본적으로 'use client' 지시문이 필요하지 않다는 것이다.
Link 컴포넌트 자체가 이미 클라이언트 컴포넌트를 내보내고 있기 때문에, 이 컴포넌트를 직접 사용하는 경우에는 별도의 지시문 없이도 서버 컴포넌트 내에서 사용 가능하다.
Link 컴포넌트는 다양한 속성을 지원한다.
// 다양한 Link 속성 예시
<Link
href="/products/123"
prefetch={false} // 미리 페이지 로드 비활성화
scroll={false} // 페이지 전환 시 스크롤 위치 유지
replace // 브라우저 히스토리에 새 항목 추가하지 않음
className="my-link"
>
제품 상세 보기
</Link>이 속성들을 통해 페이지 이동 동작을 더 세밀하게 제어할 수 있다.
특히 prefetch 속성은 기본적으로 true로 설정되어 있어 링크가 뷰포트에 들어올 때 해당 페이지를 미리 로드한다.
이를 통해 사용자가 링크를 클릭했을 때 거의 즉시 페이지가 로드되어 더 나은 사용자 경험을 제공한다.
useRouter와 router.push를 활용한 프로그래매틱 라우팅
버튼 클릭, 폼 제출, 특정 조건 충족 등 사용자 상호작용에 따라 프로그래매틱하게 페이지 이동을 처리해야 할 때는 useRouter 훅을 사용한다.
App Router에서 이 훅은 next/navigation 패키지에서 import해야 한다.
// app/login/page.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
export default function LoginPage() {
const router = useRouter();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// 로그인 로직 (예시)
const success = await mockLoginAPI(username, password);
if (success) {
// 로그인 성공 시 대시보드로 리다이렉트
router.push('/dashboard');
}
};
// 목업 API 함수
const mockLoginAPI = async (username: string, password: string) => {
// 실제로는 서버에 인증 요청을 보내야 함
return username.length > 0 && password.length > 0;
};
return (
<div>
<h1>로그인</h1>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="username">사용자명:</label>
<input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">비밀번호:</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit">로그인</button>
</form>
</div>
);
}위 코드에서는 로그인 폼 제출 시 router.push()를 사용하여 로그인 성공 후 대시보드 페이지로 이동하는 예시를 보여준다.
이 방식은 조건부 라우팅이나 사용자 상호작용 후 페이지 이동을 구현할 때 특히 유용하다.
useRouter 훅을 통해 제공되는 주요 메서드는 다음과 같다.
// useRouter 훅의 다양한 메서드
router.push('/dashboard'); // 새 페이지로 이동
router.replace('/dashboard'); // 현재 히스토리 항목을 대체하며 이동
router.back(); // 브라우저 히스토리에서 이전 페이지로 이동
router.forward(); // 브라우저 히스토리에서 다음 페이지로 이동
router.refresh(); // 현재 라우트를 새로고침
router.prefetch('/dashboard'); // 특정 페이지를 미리 로드
// 쿼리 파라미터와 함께 이동
router.push('/products?category=electronics&sort=price');
// 동적 라우트로 이동
router.push(`/products/${productId}`);이러한 메서드들을 활용하여 다양한 페이지 이동 시나리오를 구현할 수 있다.
Link와 useRouter 사용 시 'use client' 지시문이 필요한 경우
Next.js App Router에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 취급된다.
그러나 Link와 useRouter는 다른 특성을 가진다.
Link 컴포넌트:
- Link 컴포넌트는 그 자체로 클라이언트 컴포넌트이다.
- 따라서 Link를 직접 사용하는 컴포넌트에는 'use client' 지시문이 필요하지 않다.
- 서버 컴포넌트 내에서도 직접 Link를 사용할 수 있다.
useRouter 훅:
- useRouter는 React 훅이므로 클라이언트 컴포넌트에서만 사용할 수 있다.
- 따라서 useRouter를 사용하는 컴포넌트는 반드시 'use client' 지시문을 파일 상단에 추가해야 한다.
구글링을 해보니 실전에서는 이 두 가지 방법을 함께 사용하는 경우가 많다고 한다.
예를 들어, 네비게이션 메뉴는 Link를 사용하고, 조건부 리다이렉트가 필요한 폼이나 상호작용 컴포넌트에서는 useRouter를 사용하는 식이다.
다음 글은 라우팅 시 데이터 전달 방법에 대해 알아볼 예정이다!!!