location.href vs location.assign vs location.replace 차이점

 

어쩌다 회사 회의 시간에 location.href에 string을 할당하는 방식이랑

location.assign을 쓰는 방식 중에 어떤거를 쓰는 것이 더 좋을까에 관한 얘기가 나왔는데

순간 2개의 차이점이 뭔지 헷갈려서 찾아본 내용을 간단히 정리해보았다.

 

window.location

read-only 속성을 가진 window.location 은 document의 현재 location 정보를 담은 Location 객체를 리턴해준다.

window.location은 read-only Location 객체임에도 불구하고 DOMString을 할당할 수 있다. 이 말인즉슨 대부분의 경우 location이 마치 string인 것처럼 사용할 수 있다는 뜻이다.

// 아래 2개는 완전히 같다.
location = 'http://www.example.com';
location.href = 'http://www.example.com';

 

Location properties

• [Location.ancestorOrigins]: 주어진 Location 객체와 연관된 document의 모든 조상 browsing context들이 역순으로 담긴 static한 DOMStringList이다.
• [Location.href]: 전체 URL을 담고있는 USVString을 리턴하는 stringifier이다. 값이 바뀌면 연관된 document는 새로운 페이지로 이동한다.
• [Location.protocol]: URL의 프로토콜 스키마를 담고 있는 USVString]이다. (마지막 :를 포함한다.)
• [Location.host]: host를 담고 있는 USVString이다. (:와 URL의 포트번호를 포함한다.)
• [Location.hostname]: URL의 도메인을 담고 있는 USVString이다.
• [Location.port]: URL의 포트 번호를 담고 있는 USVString이다.
• [Location.pathname]: 최초 / 뒤에 나오는 path들을 담고 있는 USVString이다. (query string이나 fragment는 포함하지 않는다.)
• [Location.search]: ? 를 포함하여 그 뒤에 나오는 URL의 파라미터나 querystring을 담은 USVString이다. 모던 브라우저들은 querystring으로부터 parameter들을 쉽게 파싱할 수 있도록 URLSearchParams나 URL.searchParams등을 제공해준다.
• [Location.hash]: # 를 포함하여 뒤에 나오는 fragment 식별자를 담은 USVString이다.
• [Location.origin]:  Read only - 대표 URL origin의 유니코드 직렬화를 담고 있는 USVString이다.

 

 

 

Location methods

• [Location.assign()]: 파라미터로 전달한 URL에서 리소스를 로드한다.
• [Location.reload()]: 리프레시 버튼과 같이 현재의 URL을 다시 로드한다.
• [Location.replace()]: (파라미터로 전달된 URL로 리다이렉트하면서) 전달된 URL의 리소스로 현재의 리소스를 교체한다.
  assign() 메소드나 href 속성을 교체하는 것과 replace()가 다른 점: replace()를 사용하고나면 현재의 페이지는 session History에 저장되지 않는다. 이 말은 back 버튼을 눌러도 다시 이 전 페이지로 이동할 수 없다는 뜻이다.
• [Location.toString()]: 전체 URL을 담고 있는 USVString을 리턴한다. HTMLHyperlinkElementUtils.href 와 동일한 기능이지만 값을 수정하기 위해 사용할 수는 없다.

 

 

 

결론

아래 3개는 완전히 동일한 기능(새 URL로 이동)을 한다.

window.location.assign(url);
window.location = url;
window.location.href = url;

 

 

replace 메소드도 똑같이 새 URL로 이동하는 기능이지만 이동하기 직전의 페이지가 history에 추가되지 않는다는 점이 다르다.

 

 

<기타 참고사항 | 테스트 코드에서 Location mocking하기>

integration test code에서 페이지가 제대로 이동하는지 여부를 테스트하고 싶을 때가 있다.

테스트를 위해 location 객체를 사전에 mocking을 해둬야하는데

문제는 location이 read-only 객체이기 때문에 그냥 할당을 하는 방식으로 mocking을 하면 TypeScript가 에러를 뱉는다.

 

따라서 아래 코드를 test-setup 파일에 넣어서 location 객체를 writable 가능하도록 만들어주어야 한다.

 

Object.defineProperty(window, 'location', {
  value: {
    ...window.location,
  },
  writable: true,
});

 

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/Window/location
• https://stackoverflow.com/questions/7703689/difference-between-window-location-href-window-location-replace-and-window-loca