[next.js]a태그 vs Link태그 vs Router(useRouter)

a태그

페이지를 이동할 때 전체 페이지가 새로고침(완전한 리로드)됨

Link태그

페이지 이동 시 전체 페이지 새로고침 없이, 필요한 데이터만 가져와 빠르게 이동

Router(useRouter)

클라이언트 측 라우팅을 위한 훅(hook)

=> 현재의 라우터 상태에 접근하고, 페이지 이동 및 쿼리 파라미터를 쉽게 관리 가능

=> 브라우저의 히스토리 스택과 밀접하게 관련되어 있음

*히스토리 스택: 브라우저는 사용자가 방문한 페이지의 순서를 기록, 이 기록을 통해 뒤로 가기, 앞으로 가기 같은 기능이 가능

"use client"; // client 로직을 사용하기 위함
import { useRouter } from "next/navigation";

const router = useRouter();

 

a태그보단 Link나 Router를 권장🎉