웹 개발에서 URL 리디렉션은 사용자를 현재 페이지에서 다른 페이지로 자동으로 이동시키는 기능입니다. JavaScript에서는 window.location.href 속성에 원하는 URL을 할당하는 것만으로 간단하게 리디렉션을 구현할 수 있습니다.
아래 예제는 버튼을 클릭하면 www.google.com으로 이동하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>JavaScript Redirect a URL</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 www.google.com으로 이동합니다.
</h3>
<script>
document.querySelector('.Btn').addEventListener('click',()=>{
window.location.href = 'https://www.google.com';
})
</script>
</body>
</html>코드 설명
이 코드의 핵심 동작 방식은 다음과 같습니다.
document.querySelector('.Btn')으로 클래스명이Btn인 버튼 요소를 선택합니다.addEventListener('click', ...)을 통해 버튼 클릭 이벤트가 발생할 때 콜백 함수가 실행되도록 등록합니다.- 콜백 함수 내부에서
window.location.href = 'https://www.google.com'을 설정하여 브라우저가 해당 URL로 즉시 이동하도록 합니다.
실행 결과
페이지를 열면 아래와 같이 버튼과 안내 문구가 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 브라우저가 곧바로 구글 홈페이지로 리디렉션됩니다.
참고: 다른 리디렉션 방법
window.location.href 외에도 상황에 따라 유용한 몇 가지 방법이 있습니다.
window.location.assign('URL')– href와 동일하게 이동하며, 브라우저 히스토리에 현재 페이지가 남아 뒤로 가기가 가능합니다.window.location.replace('URL')– 현재 페이지를 히스토리에서 대체하므로 뒤로 가기 버튼으로 돌아올 수 없습니다. 로그인 후 이전 페이지 접근을 차단하고 싶을 때 유용합니다.window.location.reload()– 새로운 URL이 아니라 현재 페이지를 다시 불러올 때 사용합니다.
단순히 사용자를 다른 페이지로 보내는 것이 목적이라면 window.location.href가 가장 직관적이고 널리 사용되는 방식입니다.