JavaScript에서 location 객체는 브라우저의 주소창(URL) 을 읽거나 변경할 수 있는 아주 중요한 객체입니다. 간단한 새로고침부터 SPA 라우팅까지 다양한 곳에서 활용됩니다.
🔎 location이란?
location 객체는 브라우저의 현재 주소 정보를 포함하며 페이지 이동을 제어할 수 있는 객체입니다.
console.log(location); // 전체 URL 관련 정보 출력📌 주요 속성과 메서드 정리
| 속성/메서드 | 설명 |
|---|---|
href | 전체 URL (https://example.com?a=1) |
protocol | https: or http: |
host | 도메인:포트 예: example.com:3000 |
hostname | 도메인명 (example.com) |
port | 포트 번호 (3000) |
pathname | 경로 (/about, /index.html) |
search | 쿼리스트링 (?id=1) |
hash | 해시 (#top, #section2) |
assign(url) | 해당 URL로 이동 (히스토리 기록됨) |
replace(url) | 해당 URL로 이동 (히스토리 기록 안됨) |
reload() | 새로고침 |
💡 기본 예제
1. 현재 페이지의 URL 정보 출력하기
2. 페이지 리다이렉트
3. 새로고침 버튼 만들기
4. 쿼리 파라미터 추출
🚀 고급 활용
1. hashchange 이벤트 사용하기
URL 해시가 바뀔 때마다 이벤트를 감지할 수 있습니다. SPA 라우팅에 유용합니다.
window.addEventListener("hashchange", () => {
console.log("해시 변경됨:", location.hash);
});- 예: location.hash = "#about" → 이벤트 발생
2. SPA 내 해시 기반 라우팅 구현
간단한 싱글 페이지 라우팅도 구현 가능합니다.
🔚 정리
| 기능 | 활용 예시 |
|---|---|
| 현재 URL 정보 추출 | 로그 분석, 추적 |
| 다른 페이지로 이동 | 로그인 후 리디렉션 |
| 해시 변경 감지 | SPA에서 탭 이동 |
| 새로고침 | 일부 리셋 버튼에 사용 |
| 쿼리 파라미터 추출 | 필터, 검색 기능 |
✍️ 마무리
location 객체는 단순히 URL을 보여주는 것 이상으로 페이지 흐름 제어의 핵심이 됩니다. 특히 SPA를 구현하거나 URL 기반 상태 관리를 해야 할 때 자주 사용되므로, 꼭 실습을 통해 익혀두시길 바랍니다.
html_programming_language