a 태그를 사용하지 않고, 페이지를 이동시켜야 하는 경우가 있다.
button 태그를 클릭했을 때라던지...매우 다양할 것이다.
이런 경우 어떻게 페이지 이동을 구현해야할까?

window.location.href

방법은 매우 간단하다.

window.location.href = "이동할 페이지 주소";

window.location.href에 이동하고자 하는 주소를 입력해주면 된다.

다른 페이지로 이동

예를들어, 어떤 태그를 클릭했을 때(여기서는 button 태그라고 가정),
어떤 작업을 수행하고, 그 작업이 성공했을 경우 페이지를 이동한다고 해보자.
코드는 아래와 같을 것이다.

const btn = document.querySelector(".btn");

btn.addEventListener("click", clickHandler);

function clickHandler(){
  // ... 작업 로직 ...  //
  
  if(작업 성공){
    window.location.href = "이동할 페이지 주소";
  }
}

다른 창에 페이지를 생성

여담이지만, 페이지 이동 외에도 새로운 창을 열어 페이지를 보여주는 방법도 있다.

window.open("보여줄 페이지 주소");

button 태그의 onclick 속성 사용하기

또 다른 방법은 button 태그의 onclick 속성을 사용하는 것이다.

onclick 속성의 값으로 아래와 같이 입력해주면 된다.

location.href = "이동할 페이지 주소"

앞에 window 객체만 사라졌을 뿐, 완전히 같은 방법이다.
사용 예시는 아래와 같다.

<button type="button" onclick="location.href='이동할 페이지 주소'">버튼</button>

이런 방법들의 이유??

반드시 a 태그를 사용하지 않아도 페이지 이동을 구현할 수 있다는 점,
추가 로직을 실행하고 조건에 따라 페이지 이동을 구현할 수 있다는 점에서
높은 활용도가 있을 것이라 생각한다.

HTML 태그를 좀 더 의미있게 사용할 수 있는 방법이 아닐까 생각한다.

참고 자료

hianna님 블로그
pekahblog님 블로그
cocoder16님 블로그