window.localtion.href vs window.location.replace vs window.location.assign의 차이점

Title

window.location.href

※ href 뜻

href 프로퍼티는 현재 페이지의 URL을 저장한다.
href 프로퍼티가 새로운 URL로 바뀌면, 새로운 URL이 브라우저의 History에 추가되고 유저는 새로운 URL로 이동한다.
- 유저가 "뒤로 가기" 버튼을 클릭하면 이전 URL로 이동할 수 있다.
- window.history.length 로 확인할 수 있다.
href 속성을 업데이트하는 것은, assign() 메서드를 사용하는 것보다 빠르다. (프로퍼티에 접근하는 것보다 함수를 호출하는 것이 더 느리기 때문이다.)

javascript

window.location.href = 'https://github.com/';

window.location.href = 'https://github.com/';

Note: 아래의 코드는 모두 동일하게 동작한다.

javascript

window.location = 'https://github.com/';

window.location.href = 'https://github.com/';

window.location = 'https://github.com/';

window.location.href = 'https://github.com/';

replace() 메서드는 브라우저 History에 기록 추가 없이 새로운 URL로 변경한다.
- 이름에서 알 수 있듯이, 브라우저 History에서 현재 기록을 새로운 URL로 대체한다.
replace() 메서드로 현재 URL을 새로운 URL로 대체하고 나면, 유저가 "뒤로 가기" 버튼을 클릭하더라도, 현재 URL로 접근할 수 없다.
replace() 메서드와 assign() 메서드의 차이점은 현재 페이지를 브라우저의 History에서 대체되는지 여부이다.
- replace() : 현재 URL이 새로운 URL로 대체됨.
- assign() : 새로운 URL이 브라우저 History에 추가됨.

javascript

window.location.replace('https://github.com/');

window.location.replace('https://github.com/');

assign() 메서드는 href 프로퍼티를 조작하는 것과 비슷하게 새로운 URL이 브라우저의 History에 추가되고 유저는 새로운 URL로 이동한다.
assign() 메서드는 href 프로퍼티와 달리 현재 위치(URL)을 반환하는데 사용되지 않는다.
assign() 메서드는 replace() 메서드와 달리 새로운 기록을 브라우저의 History에 추가한다.
href 를 직접 업데이트하는 것보다 assign() 메서드를 호출하는 것이 더 안전하고 읽기 쉬운 것으로 간주된다.

javascript

window.location.assign('https://github.com/');

window.location.assign('https://github.com/');

`window.location.href`	`window.location.replace()`	`window.location.assign()`
현재 페이지의 URL을 저장하고 있다.	현재 페이지를 대체하는데 사용된다.	새 페이지를 불러오는데 사용된다.
브라우저 History에 새 기록을 추가한다.	브라우저 History에 새 기록을 추가하지 않는다.	브라우저 History에 새 기록을 추가한다.
브라우저 History에서 현재 페이지를 삭제하지 않는다.	브라우저 History에서 현재 페이지를 삭제한다.	브라우저 History에서 현재 페이지를 삭제하지 않는다.
`assign()` 메서드보다 빠르다	브라우저 History에서 현재 기록을 대체하는데 사용된다.	`href` 를 조작하는 것보다 안전하고 읽기 쉽다.