Link & Navigation — next/link, useRouter, redirect 완전 정복

💡 `<Link>` 컴포넌트는 링크가 뷰포트에 보이면 해당 페이지의 데이터를 백그라운드에서 미리 로드(프리패칭)합니다. 이 덕분에 사용자가 클릭하는 순간 이미 데이터가 준비되어 있어 페이지 전환이 거의 즉각적으로 이루어집니다. 전체 페이지를 새로고침하는 `<a>` 태그와 달리, 클라이언트 사이드 전환으로 상태도 유지됩니다.

💡 Server Component에서는 React 훅(`useRouter`)을 사용할 수 없습니다. 대신 `next/navigation`의 `redirect()` 함수를 사용합니다. 이 함수는 서버에서 HTTP 307 리다이렉션을 수행하며, 호출 시 즉시 실행을 중단하므로 `return`이 필요 없습니다. 영구 리다이렉션은 `permanentRedirect()`(308)를 사용합니다.

💡 `useSearchParams()`는 `URLSearchParams` 인터페이스를 반환합니다. 특정 파라미터 값을 가져오려면 `.get(key)` 메서드를 사용합니다. 값이 없으면 `null`을 반환하므로 기본값 처리(`?? ''`)를 함께 사용하는 것이 좋습니다. `searchParams.category`처럼 객체 속성으로 접근하는 방식은 동작하지 않습니다.

💡 `router.push()`는 브라우저 히스토리에 새 항목을 추가합니다. 사용자가 뒤로 가기 버튼을 누르면 이전 페이지로 돌아갈 수 있습니다. 반면 `router.replace()`는 현재 히스토리 항목을 새 URL로 교체하므로 뒤로 가기를 눌러도 교체 전 페이지로 돌아갈 수 없습니다. 로그인 후 이동이나 리다이렉션처럼 뒤로 가기를 방지할 때 사용합니다.

💡 `usePathname()`은 `next/navigation`에서 제공하는 훅으로, 현재 URL의 경로 부분(`/blog/123` 등)을 반환합니다. `'use client'` 지시어가 필요한 Client Component 전용 훅입니다. 이를 활용하여 현재 경로와 링크 href를 비교해 활성 링크(Active Link)를 스타일링합니다. `useRouter().pathname`은 App Router에서 더 이상 사용할 수 없습니다.