JavaScript location object method

자바스크립트의 window.location 객체는 현재 브라우저에 열려 있는 웹 페이지의 URL 주소 정보를 담고 있으며, 브라우저의 주소창을 제어할 수 있는 강력한 기능을 제공합니다.

---

이 객체를 활용하면 사용자를 다른 페이지로 이동시키거나, 현재 페이지를 새로고침하는 등 페이지 전환과 관련된 작업을 자유자재로 처리할 수 있습니다.

실무에서 주소 제어 시 가장 많이 사용하는 location 객체의 중요 메소드와 핵심 프로퍼티를 정리해 드리겠습니다.

---

---

1. 페이지 이동 관련 중요 메소드

브라우저의 주소를 바꾸어 사용자를 다른 URL로 이동시킬 때 사용하는 메소드입니다.

두 메소드는 작동 방식과 브라우저 방문 기록(History)을 다루는 방식에서 큰 차이가 있습니다.

• location.assign(url): 일반적인 페이지 이동
  • 인자로 전달한 URL로 이동합니다.
  • 특징: 이전 페이지의 기록이 브라우저 방문 기록(History)에 남기 때문에, 이동 후 사용자가 브라우저의 '뒤로 가기' 버튼을 누르면 이전 페이지로 돌아올 수 있습니다.
• location.replace(url): 현재 페이지를 대체하며 이동
  • 인자로 전달한 URL로 이동합니다.
  • 특징: 현재 페이지의 기록을 방문 기록에서 삭제하고 새로운 URL로 덮어씁니다. 따라서 이동 후 '뒤로 가기' 버튼을 눌러도 이 페이지로 돌아올 수 없으므로, 로그인 성공 후 메인 화면으로 이동시키거나 결제 완료 후 결제창으로 돌아오지 못하게 막을 때 필수적으로 사용됩니다.

// 뒤로 가기가 가능한 이동
location.assign("https://example.com/subpage");

// 뒤로 가기가 불가능한 이동 (로그인 처리 등)
location.replace("https://example.com/dashboard");

2. 페이지 새로고침 메소드

• location.reload(): 현재 페이지 새로고침
  • 브라우저의 '새로고침(F5)' 버튼을 누른 것과 동일하게 페이지를 다시 불러옵니다.
  • 데이터가 변경되어 화면을 동기화해야 하거나, 초기 상태로 되돌려야 할 때 자주 쓰입니다.

// 버튼 클릭 시 현재 페이지를 새로고침하는 예시
const refreshPage = () => {
  location.reload();
};

3. URL 구조를 분석하는 핵심 프로퍼티 (중요)

메소드는 아니지만, location 객체는 현재 주소창의 URL을 잘게 쪼개어 정보를 제공하는 유용한 속성들을 가지고 있습니다.

• location.href: 현재 페이지의 전체 URL 주소를 문자열로 반환합니다.
  • 꿀팁: location.href = "url" 형태로 값을 대입하면 location.assign("url")과 동일하게 페이지가 이동하므로, 실무에서 가장 흔하게 쓰이는 이동 방식이기도 합니다.
• location.protocol: 웹 페이지의 통신 프로토콜을 반환합니다. (예: http:, https:)
• location.host: 도메인 이름과 포트 번호를 포함한 주소를 반환합니다. (예: example.com:8080)
• location.pathname: 도메인 뒤의 실제 파일이나 자원의 경로를 반환합니다. (예: /products/item1)
• location.search: URL 뒤에 매개변수로 붙는 쿼리 스트링을 반환합니다. ?를 포함한 파라미터들이 담기며, 페이지 간 데이터를 전달받을 때 핵심 역할을 합니다. (예: ?search=phone&page=2)

// 현재 URL이 "https://example.com:8080/search?q=javascript" 일 때
console.log(location.href);     // "https://example.com:8080/search?q=javascript"
console.log(location.pathname); // "/search"
console.log(location.search);   // "?q=javascript"

// 단순 페이지 이동 팁
location.href = "https://www.google.com"; // 구글로 이동

📋 location 객체 중요 기능 요약표

종류	이름	기능 및 역할	뒤로 가기 가능 여부
메소드	assign(url)	지정한 주소로 이동 (기록 추가)	O
메소드	replace(url)	지정한 주소로 히스토리를 덮어쓰며 이동	X
메소드	reload()	현재 웹 페이지 다시 불러오기 (새로고침)	-
프로퍼티	href	전체 URL 주소 조회 및 대입을 통한 페이지 이동	O
프로퍼티	pathname	도메인을 제외한 실제 서비스 내부 자원 경로명 조회	-
프로퍼티	search	URL 뒤의 파라미터(?q=keyword 등) 추출	-

학습 정리

• 단순히 링크를 타고 넘어가듯 이동시키고 싶을 때는 **location.href**나 **location.assign()**을 사용하면 됩니다.
• 비밀번호 변경 완료 후 마이페이지로 이동하거나, 설문조사 제출 완료 후 메인으로 보낼 때처럼 사용자가 '뒤로 가기'를 눌러 이전 폼(Form)을 다시 제출하는 어색한 상황을 막으려면 반드시 **location.replace()**를 선택해야 안전합니다.

 

주소창을 자유자재로 다루는 location 객체의 핵심 메소드들을 정복하셨습니다!

---