JavaScript - 페이지이동 location.href / location.replace() / location.assign()

 

주말의 끝을 맞아 오늘은,

페이지 이동할 때 숨쉬듯 사용하였던 내장 메소드들의 속성을 심층 비교하며 공부해보았다.

 

어느 날 열심히 일하다가 페이지 이동 관련하여 히스토리 이슈가 생겼었는데

replace() 를 사용하니 히스토리가 남지않아 [뒤로가기] 기능이 의미를 잃어버리는 일이 생기게 된 일이었던 것이다.

그 땐 옆에서 🙄어🙄리🙄둥🙄절🙄  줏어듣기만 했었는데 우연한 기회로 정리해보게 되었다.

그럼 공식문서를 참고하며 차이를 알아보도록 하즈아

 

---

JavaScript - 페이지이동 location.href / location.replace()/ location.assign()

 

location.href

href는 <a> 태그를 사용하면서 가장 익숙하게 보았던 속성이다. 

현재 접속 중인 페이지 정보를 가지고 있다. 또한 url 값을 넣고 다른 페이지로 이동한다.

// HTML
<a id="myAnchor" href="https://developer.mozilla.org/en-US/Location/href">

// JS
var anchor = document.getElementById("myAnchor");
var result = anchor.href;
console.log('result'); 	// 'https://developer.mozilla.org/en-US/Location/href'

 

location.replace()

현재 리소스를 provided 된 URL 로 바꿔치기 한다. 그래서 깨끗이 교체가 되기 때문에 이전 정보가 남지 않는다.

얘를 사용하면 히스토리 안에는 저장이 안된다. 그 말인 즉슨 유저가 back 버튼을 눌러도 이전 페이지가 나오지 않는다. (마지막으로 기록된 히스토리페이지인 전전 페이지로 돌아갈 것이다.)

// Navigate to the article by replacing this page
window.location.replace('https://dev.com/API/Location.reload');

 

location.assign()

provided 된 url 로 페이지를 새로 로드한다. 히스토리가 저장되어서 back 버튼을 누르면 뒤로 갈 수 있다.

href 랑 비슷하지만 좀 느린 대신에 더 안전하다.

// Navigate to the Location.reload article
window.location.assign('https://dev.com/API/Location.reload');

 

 

자, 한눈에 보기 쉽게 비교해놓은 표를 확인해보자.

replace는 이해가 쉬운지라,  href 와 assign 을 비교해보는 방향으로 읽어보자