골라서 쓰는 javascript에서의 리다이렉트(redirect) 방법

javascript에서 리다이렉트하는 방법은 여러 가지가 있기 때문에, 상황에 따라 가장 적절한 방법을 선택하는 것이 중요함

 

1. window.location.href

window.location.href = "https://example.com";

📌 특징:

• 가장 널리 사용되는 일반적인 방법
• 브라우저 히스토리에 기록됨 (뒤로 가기 가능)
• 현재 페이지를 대체하지 않음 (사용자가 뒤로 갈 수 있음)

✅ 사용 사례:

• 사용자가 특정 페이지에서 다른 페이지로 이동해야 할 때
• 로그인 후 메인 페이지로 이동

 

2. window.location.replace

window.location.replace("https://example.com");

📌 특징:

• 현재 페이지를 대체함(뒤로 가기 방지)
• 브라우저 히스토리에 남지 않음 (뒤로 가기 불가능)

✅ 사용 사례:

• 사용자가 특정 페이지에 다시 돌아오면 안 되는 경우 (예: 로그아웃 후 로그인 페이지)

 

3. window.location.assign

window.location.assign("https://example.com");

📌 특징:

• window.location.href와 유사하지만, 스크립트에서 실행을 중단하지 않음
• 브라우저 히스토리에 기록됨

✅ 사용 사례:

• href와 거의 동일하지만, 명시적으로 할당할 때

 

4. history.pushState() & history.replaceState()

history.pushState({}, "", "/newpage");

📌 특징:

• 실제로 페이지를 새로고침하지 않고 URL만 변경
• SPA(Single Page Application)에서 라우팅을 처리할 때 유용

✅ 사용 사례:

• React, Vue 등 프론트엔드 프레임워크에서 동적 라우팅 구현

🔹 replaceState를 사용하면 기존 히스토리를 덮어씌움:

history.replaceState({}, "", "/newpage");

 

 

 

5. setTimeout()과 함께 리다이렉트

setTimeout(() => {
  window.location.href = "https://example.com";
}, 3000); // 3초 후 리다이렉트

📌 특징:

• 사용자에게 일정 시간 동안 메시지를 보여주고 싶을 때 유용

✅ 사용 사례:

• "몇 초 후 자동으로 이동됩니다" 같은 메시지를 띄울 때

 

6. meta 태그를 이용한 자동 리다이렉트

<meta http-equiv="refresh" content="3;url=https://example.com">

📌 특징:

• HTML 레벨에서 리다이렉트 가능
• SEO에 부정적인 영향을 줄 수 있음

✅ 사용 사례:

• 서버에서 클라이언트로 직접 리다이렉트할 때 (잘 사용되진 않음)

 

🎯 정리 - 어떤 방법을 선택해야 할까?

 

방법	뒤로 가기 가능	새로고침	사용 사례
window.location.href	✅ 가능	✅ 새로고침	일반적인 리다이렉트
window.location.replace	❌ 불가능	✅ 새로고침	뒤로 가기를 막고 싶을 때
window.location.assign	✅ 가능	✅ 새로고침	href와 비슷하지만 명확한 동작
history.pushState()	✅ 가능	❌ 새로고침 없음	SPA 라우팅
history.replaceState()	❌ 불가능	❌ 새로고침 없음	SPA에서 현재 상태 변경
setTimeout() + location	✅ 가능	✅ 새로고침	일정 시간 후 리다이렉트
<meta> 태그	❌ 불가능	✅ 새로고침	서버에서 직접 설정할 때

 

 

• 일반적인 리다이렉트 → window.location.href
• 뒤로 가기 방지 → window.location.replace
• SPA 라우팅 → history.pushState()
• 몇 초 후 자동 이동 → setTimeout() + location