[JavaScript]location 객체 사용 방법

location 객체 사용 방법

location 객체란 현재 활성화된 웹 페이지의 URL 정보를 포함하는 window 객체의 프로퍼티입니다. location 객체는 전역 객체이면서 window 객체의 프로퍼티이므로 window.location 또는 location으로 호출할 수 있습니다.

---

location 객체의 프로퍼티

현재 접속한 웹 페이지의 URL이 아래와 같습니다.

https://codesandbox.io/s/js-example-forked-8shrxm?file=/src/index.js

아래 스크린샷은 위 URL 정보를 가지는 location 객체의 프로퍼티입니다.

※ username, password 프로퍼티는 더 이상 사용되지 않는 프로퍼티이므로 설명하지 않습니다.

---

href

전체 URL이 포함된 문자열입니다. href 프로퍼티를 사용하여 현재 페이지의 URL을 가져올 수 있으며, href 프로퍼티의 값이 변경되는 경우 새로운 페이지로 이동합니다.

console.log(location.href);
// https://codesandbox.io/s/js-example-forked-8shrxm?file=/src/index.js

아래 코드를 실행하면 현재 활성화된 웹 페이지가 Naver 메인 사이트로 이동합니다.

location.href = 'https://www.naver.com';

---

protocol

URL의 protocol 부분을 반환합니다.

console.log(location.protocol);
// https:

protocol 프로퍼티의 값을 http로 변경하면 현재 페이지를 http 버전으로 이동하려고 시도합니다. http 버전이 존재하면 해당 http 버전으로 이동하고 그렇지 않으면 원래 버전으로 이동합니다.

location.protocol = 'http';

---

host

port 번호가 포함된 URL의 host 부분을 반환합니다.

console.log(location.host);
// codesandbox.io

host 프로퍼티의 값을 변경하면 해당 호스트 이름으로 URL을 로드합니다. 아래 코드를 실행하면 현재 웹 페이지가 호스트가 www.naver.com인 URL로 로드합니다.

location.host = 'www.naver.com';

---

hostname

URL의 도메인 부분을 반환합니다.

console.log(location.host);
// codesandbox.io

host 프로퍼티와 동일한 것처럼 보이지만, host 프로퍼티는 port 번호를 포함하고 hostname 프로퍼티는 port 번호를 포함하지 않습니다.

console.log(location.hostname);
// 'localhost'

console.log(location.host);
// 'localhost:3000'

host 프로퍼티와 마찬가지로 hostname 프로퍼티의 값을 변경하면 현재 웹 페이지가 변경된 도메인으로 URL 로드합니다.

---

port

URL의 포트 번호를 반환합니다.

console.log(location.port);
// 3000

port 프로퍼티의 값을 변경하면 해당 포트로 URL 로드합니다. 

location.port = '5000';

---

pathname

URL의 pathname을 반환합니다. pathname 프로퍼티는 슬래시(/) 뒤 URL 경로입니다.

console.log(location.pathname);
// /s/js-example-forked-8shrxm

---

search

URL의 Query String을 반환합니다. search 프로퍼티는 물음표(?)부터 시작하는 문자열입니다.

console.log(location.search);
// ?file=/src/index.js

---

hash

URL의 hash를 반환합니다. hash 프로퍼티는 해시(#)부터 시작하는 문자열입니다.

console.log(location.hash);

---

origin

URL의 원본(프로토콜, 도메인, 포트번호)을 반환합니다.

console.log(location.origin);
// https://codesandbox.io

---

location 객체의 메서드

location 객체는 assign(), reload(), replace(), toString() 메서드를 제공합니다.

---

assign()

location.assign() 메서드는 매개변수로 전달된 문자열 타입의 URL로 로드합니다.

location.assign(url);

매개변수

url: 문자열 타입의 URL입니다.

예시) https://www.naver.com

 

반환 결과

undefined입니다.

 

아래는 location.assign() 메서드를 사용하여 naver 메인 페이지로 이동하는 예제입니다.

location.assign('https://www.naver.com');

location.assign() 메서드를 호출한 웹 페이지로 이동하려면 뒤로 가기 버튼을 클릭합니다.

---

replace()

location.replace() 메서드는 현재 리소스를 매개변수로 전달된 문자열 타입의 URL로 로드합니다.

location.replace(url);

매개변수

url: 문자열 타입의 URL입니다.

예시) https://www.naver.com 

 

반환 결과

undefined입니다.

 

아래는 location.replace() 메서드를 사용하여 naver 메인 페이지로 이동하는 예제입니다.

location.replace('https://www.naver.com');

replace() 메서드는 현재 리소스를 대체하는 것이므로 뒤로 가기 버튼을 클릭해도 location.replace() 메서드를 호출한 페이지로 이동할 수 없습니다.

---

reload()

location.reload() 메서드는 새로고침 버튼처럼 현재 리소스를 다시 불러옵니다.

location.reload();

Chrome 57 이전 버전에서는 매개변수로 true를 전달하면 해당 페이지의 모든 리소스 캐시를 비웠으나 57 버전부터는 해당 페이지의 캐시만 비워집니다.

 

따라서, 현재 Chrome 버전에서 reload() 메서드에 매개변수를 전달하는 것은 아무런 의미가 없습니다. 

---

toString()

현재 페이지의 URL을 문자열 타입으로 가져옵니다. href 프로퍼티의 반환 결과와 동일합니다.

console.log(location.toString());
// https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

---

정리

• location 객체는 현재 활성화된 웹 페이지의 URL 정보를 포함하는 window 객체의 프로퍼티이며 window.location과 location은 동일합니다.