🧩 Navigator vs location.href

---

🚦 Navigator vs location.href

Navigator(React Router의 navigate/<Navigate />)와 window.location.href 는 모두 페이지 이동을 하지만, 성격과 결과가 다릅니다.

항목	Navigator (navigate, <Navigate />)	window.location.href
동작 방식	클라이언트 사이드 라우팅(SPA)	브라우저 전체 리로드(서버 네비게이션)
성능	빠름 (리렌더만 발생)	느림 (전체 새로고침)
상태 유지	리덕스/메모리 상태 유지	초기화됨 (전역 상태/메모리 리셋)
히스토리	replace/push 제어 가능	기본적으로 push, 수동 제어 필요
미들웨어/가드	라우터 레벨의 가드/토큰 체크 용이	새로고침이라 앱 가드 로직을 다시 로드
동일 오리진 제약	SPA 내 경로 전환에 적합	외부 도메인 이동에 적합
SEO/CSR	CSR 중심	SSR/전통 페이지에 가까움
사용 시점	내부 경로 전환, 상태 유지 필요	외부 링크, 강제 새로고침, 캐시 초기화 필요할 때

📘 예시

// React Router v6
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

// SPA 내부 전환 (상태 유지)
navigate("/dashboard");        // push
navigate("/login", { replace: true });  // replace (뒤로가기 방지)

// 전체 새로고침 or 외부로 이동
window.location.href = "https://example.com";

💡 권장 가이드

• 내부 페이지 이동은 Navigator(React Router) 사용 → 상태/퍼포먼스 유리
• 외부 도메인 이동 / 강제 리로드 필요 시 location.href

---