TIL 46 | 페이지 이동 history.push vs window.location.href

사건의 발단

특정 페이지에서 헤더가 보이지않도록 분기처리를 했다.
이 때 window.location.pathname을 체크하도록 했는데
헤더가 보이지 않아야 할 페이지에서 나온 뒤에도 계속 헤더가 보이지 않는 것이다. 확인해보니 history.push()를 통해 이동할 때 window.location.pathname이 변경되지 않는다는 것을 알게 되었다. history.push 이동방식의 원리가 궁금해졌고 pathname을 변경시킬 수 있는 페이지 이동방식인 window.location.href와 비교해보았다.

history.push vs window.location.href

공통점

다른 페이지로 이동

차이점

• HTTP 요청
  history.push ❌ | window.location.href ⭕
• 새로고침
  history.push ❌ | window.location.href ⭕
• Application 상태 유지
  history.push ⭕ | window.location.href ❌

사용방법

history.push("/");
window.location.href="/";

결론

좋은 UX와 상태 지속성을 위한다면 일반적인 페이지 이동은 history.push가 더 나은 선택이지 않을까. 이동과 함께 새로고침이 필요한 경우는 window.location.href를 이용하면 되겠다.

참고자료

window.location.href vs history.pushState - which to use?
History API-MDN