[JS] location 객체의 href/assign, replace 차이점

차이점 요약

---

이미지 출처 - SamanthaMing

• window.location.assign(및 href) : 정보를 전송하지 않고 페이지만 이동 / 뒤로 가기 가능
• window.location.replace : 정보를 전송하지 않고 페이지만 교체 / 뒤로 가기 불가
• window.location.reload : 현재 페이지의 문서 다시 로드

 

window.location.assign (href)

---

• 뒤로 가기 버튼을 눌러 이전 페이지로 이동할 수 있다
• 주소 히스토리에 기록된다
• 뒤로 가기 : location.assign 메서드를 호출한 페이지로 이동
• 용도 : URL을 이동하는 대부분의 경우에 사용
• location.href``location.assign 이 둘은 사용법만 다를 뿐 기능은 동일하다

 

window.location.href = "url"; // location.href 사용법
window.location.assign("url"); // location.assign 사용법

 

window.location.replace

---

• 현재 페이지를 새로운 페이지로 덮어 씌우므로 이전 페이지로 이동할 수 없다
• 주소 히스토리에 기록되지 않는다
• 뒤로 가기 : 브라우저 히스토리에 있는 가장 최근 페이지로 이동(뒤로가기를 호출한 페이지로 이동 불가)
• 용도 : 로그인, 게시물 작성 등 보안상 이전 페이지에 접근하지 못하도록 하는 경우

 

window.location.replace("url"); // location.replace 사용법

 

history.push vs location.assign(href) 차이점

---

리액트의 라우터 라이브러리(react-router-dom)는 Browser History API의 history.pushState()를 이용해서 구현된 것이다. history.pushState()는 새로고침 없이 주소만 바뀐다. react-router-dom의 history.push() 역시 마찬가지로 동작하며, 이 메서드는 내부적으로 history.pushState()를 호출하여 URL을 변경하고 해당 경로에 맞는 컴포넌트를 렌더링 한다. Single Page Application(SPA)을 개발한다면 새로고침이 발생하는 location.assign보다 history.push를 사용하는 것이 더 적합하다.

 

1. HTTP 요청
   • history.push : X
   • location.assign : O
2. 새로고침
   • history.push : X
   • location.assign : O
3. 어플리케이션 상태 유지
   • history.push : O
   • location.assign : X

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요