페이지 라우팅 방식들

Next.js/React 환경에서 페이지 이동하는 방법들과 각각의 장단점을 정리해줄게:

1. Next.js Router 기반 방법들

useRouter + router.push()

const router = useRouter();
router.push('/path');

장점:

• Next.js 최적화 혜택 (프리페칭, 클라이언트 사이드 네비게이션)
• 히스토리 스택에 추가 (뒤로가기 가능)
• 상태 유지 (React 컴포넌트 상태 보존)
• TypeScript 타입 안정성 (App Router에서)

단점:

• Next.js 환경에서만 사용 가능
• 컴포넌트 내부에서만 호출 가능

useRouter + router.replace()

router.replace('/path');

장점:

• 현재 페이지를 히스토리에서 대체 (뒤로가기 시 이전 페이지로)
• 로그인 후 리다이렉트 등에 유용

단점:

• 히스토리 스택에 추가되지 않음

Link 컴포넌트

<Link href="/path">이동</Link>

장점:

• SEO 친화적 (검색엔진이 링크 인식)
• 접근성 우수 (키보드 네비게이션, 스크린리더)
• 자동 프리페칭
• 우클릭으로 새 탭 열기 가능

단점:

• 클릭 시에만 동작 (프로그래밍적 제어 제한)

2. 브라우저 네이티브 API

window.location.href

window.location.href = '/path';

장점:

• 모든 브라우저 환경에서 동작
• 외부 URL로도 이동 가능
• 페이지 전체 새로고침 (상태 완전 초기화)

단점:

• 페이지 전체 리로드 (성능 저하)
• Next.js 최적화 혜택 없음
• React 상태 모두 손실

window.location.replace()

window.location.replace('/path');

장점:

• 히스토리 대체 (뒤로가기 방지)
• 로그인 페이지 등에서 유용

단점:

• 전체 페이지 리로드
• React 상태 손실

History API

window.history.pushState(null, '', '/path');

장점:

• 페이지 리로드 없이 URL 변경
• 히스토리 조작 가능

단점:

• React Router/Next.js와 충돌 가능
• 직접 컴포넌트 리렌더링 처리 필요

3. 상황별 권장사항

일반적인 페이지 이동 (내부 링크)

// 프로그래밍적 이동
const router = useRouter();
router.push('/dashboard');

// 사용자 클릭 기반
<Link href="/dashboard">대시보드</Link>

로그인 후 리다이렉트

// 로그인 페이지로 돌아가지 않게
router.replace('/dashboard');

외부 사이트 이동

// 새 탭
window.open('https://example.com', '_blank');

// 현재 탭
window.location.href = 'https://example.com';

조건부 이동 (이벤트 핸들러)

const handleSubmit = async () => {
  const success = await submitForm();
  if (success) {
    router.push('/success');
  } else {
    router.push('/error');
  }
};

뒤로가기/앞으로가기

router.back();    // 뒤로가기
router.forward(); // 앞으로가기 (브라우저 히스토리에 있을 때만)

4. 성능 최적화 팁

프리페칭 제어

<Link href="/heavy-page" prefetch={false}>
  무거운 페이지
</Link>

Shallow 라우팅 (쿼리만 변경)

router.push('/same-page?tab=2', undefined, { shallow: true });

5. 최종 권장사항

대부분의 경우: useRouter + router.push() 또는 Link 컴포넌트
로그인/인증 관련: router.replace()
외부 링크: window.location.href 또는 window.open()
전체 페이지 리셋 필요시: window.location.href

Next.js 환경이라면 가능한 한 Next.js 라우터를 사용하는 게 성능과 사용자 경험 측면에서 최적이야.