[javascript] location.href 와 location.replace() 의 차이와 구분 사용 방법
자바스크립트 언어에서 이 둘은 유사한 기능을 합니다.
자바스크립트를 이용해 지정한 URL로 동일하게 이동하지만, 이 둘은 상당히 다른 점이 많으며, 어떤 경우에는 주의해서 사용해야 하기도 합니다.
이 둘은 아래와 같이 구분됩니다.
항목 |
location.href |
location.replace() |
타입 |
속성 |
메써드(함수) |
웹브라우저 히스토리 |
저장됨 |
저장안됨 |
브라우저 뒤로가기 |
"location.href" 를 호출한 페이지로 이동 |
웹브라우저 히스토리에 있는 가장 최근 이전 페이지로 이동. 뒤로가기로 "location.replace()" 를 호출한 페이지로 갈 수 없음. |
사용방법 |
location.href = 'page.html'; |
location.replace('page.html'); |
용도 |
URL을 이동하는 대부분의 경우에 사용 |
뒤로가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에만 사용. |
사용자 클릭 등의 사용자 반응에 의해 URL을 이동하는 경우 location.href 를 사용하는 것이 원칙입니다.
웹 브라우저에 히스토리가 남기 때문에 사용자 선택에 의해 이전 방문 URL로 이동하거나 뒤로 가기를 할 수 있기 때문입니다.
이런 일반적인 URL 이동에 location.replace() 를 사용하면 사용자가 이전 URL 이동을 원할 경우 불편을 초래하게 됩니다.
반면, 쇼핑몰 결제 프로세스나, 중요 정보를 변경 후 다른 URL로 이동하게 되는 경우, 뒤로가기로 해당 URL로 다시 접근하게 되는 것을 막을 필요가 있을 수 있습니다.
이런 경우 location.replace()를 이용해 정보나 값을 변경하는 페이지를 뒤로가기로 접근할 수 없도록 막아야 합니다.
이렇게 하지 않을 경우, 사용자가 뒤로가기를 눌러 이전 URL로 이동하면서 값이 재적용되거나 누적되는 문제가 생길 가능성이 높아집니다.
자바스크립트를 이용해 동적인 페이지 구성을 할 때, 항상 사용자가 뒤로가기를 눌러 이전 페이지로 되돌아올 경우에 대한 대비를 해야 합니다.