window.location.href router.navigateByUrl 차이점과 history 관리

window.location.href와 this.router.navigateByUrl은 둘 다 웹 애플리케이션에서 페이지를 전환하는 방법입니다.

1. window.location.href:
   window.location.href은 JavaScript에서 가장 간단한 페이지 전환 방법 중 하나입니다. 이 방법은 브라우저의 주소 표시 줄(주소창)을 직접 변경하여 해당 URL로 페이지를 새로고침하고 이동시킵니다. 사용법은 다음과 같습니다:

window.location.href = "https://www.example.com"; // 새로운 URL로 페이지 전환

• 공통점: window.location.href와 this.router.navigateByUrl 모두 페이지를 전환하는 데 사용되며, 사용자가 새로운 URL로 이동하게 됩니다.

• 차이점: window.location.href은 브라우저의 주소 표시 줄을 변경하여 페이지를 전환하는 반면, this.router.navigateByUrl은 Angular 프레임워크에서 라우터를 통해 페이지를 전환하는 방법입니다. Angular 애플리케이션에서 주로 사용됩니다.

2. this.router.navigateByUrl:
   this.router.navigateByUrl은 Angular 프레임워크에서 제공하는 라우터 서비스를 사용하여 페이지를 전환하는 방법입니다. Angular 애플리케이션에서 라우팅을 구현할 때 많이 사용됩니다. 사용법은 다음과 같습니다:

import { Router } from '@angular/router';

// ...

constructor(private router: Router) { }

navigateToExamplePage() {
  this.router.navigateByUrl('/example'); // 새로운 URL로 페이지 전환
}

• 공통점: 둘 다 페이지를 전환하는 데 사용되며, 두 가지 모두 브라우저의 기록에 새로운 URL이 남습니다.

• 차이점: this.router.navigateByUrl은 Angular 프레임워크와 관련이 있으며, Angular 애플리케이션에서만 사용 가능합니다. window.location.href은 순수 JavaScript에서 동작하며, Angular와 관련이 없는 일반 웹 프로젝트에서도 사용할 수 있습니다.

history 비우기:

페이지를 전환하면 브라우저의 history에 이전 페이지의 정보가 남게 됩니다. 만약 특정 상황에서 history를 비워야 한다면, 다음과 같은 방법으로 가능합니다:

1. window.history.pushState() 및 window.history.replaceState():
   pushState() 메서드는 새로운 상태를 history 스택에 추가하며, replaceState() 메서드는 현재 상태를 바꿉니다. 이 두 메서드를 사용하여 history를 조작할 수 있습니다.

window.history.pushState({}, '', '/new-page'); // 새로운 상태를 추가합니다.
window.history.replaceState({}, '', '/new-page'); // 현재 상태를 변경합니다.

2. window.location.replace():
   window.location.replace()를 사용하여 현재 페이지의 history를 대체할 수 있습니다. 이렇게 하면 사용자가 뒤로가기 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 없습니다.

window.location.replace('/new-page'); // 현재 페이지의 history를 대체합니다.

위의 방법은 브라우저의 history를 조작하는 것으로, 사용자 경험에 영향을 미치므로 신중하게 사용해야 합니다. 특정 상황에 따라 history를 비우는 대신, 뒤로가기 버튼을 처리하거나 페이지 전환 방식을 적절하게 선택하는 것이 바람직할 수 있습니다.

this.router.navigateByUrl('/my-page', { replaceUrl: true });

• { replaceUrl: true }: 이 부분은 두 번째 인자로 전달되는 옵션 객체입니다.

  • replaceUrl: true: 이 옵션은 페이지를 전환할 때 pushState 대신 replaceState를 사용하여 history 스택을 수정합니다. 즉, 이전 페이지의 기록을 남기지 않고 새로운 페이지로 덮어씁니다. 따라서 사용자가 뒤로가기 버튼을 눌렀을 때, 이전 페이지로 돌아가지 않고 바로 전 페이지로 이동하게 됩니다.

  • replaceUrl: false (기본값): 이 옵션이 설정되지 않았거나 false로 설정되면, pushState를 사용하여 새로운 상태를 history 스택에 추가하므로 사용자가 뒤로가기 버튼을 눌렀을 때, 이전 페이지로 돌아갈 수 있습니다.

결론적으로, 위의 코드는 '/my-page'로 페이지를 전환하고, replaceUrl: true를 설정하여 history 스택에 이전 페이지의 기록을 남기지 않고 새로운 페이지로 덮어쓰게 됩니다. 따라서 사용자가 뒤로가기 버튼을 눌렀을 때 이전 페이지로 돌아가지 않고 새로운 페이지로 바로 이동하게 됩니다.