[JavaScript/React] 현재 URL 복사하기 & window.location 객체

[JavaScript/React] 현재 URL 복사하기 & window.location 객체

프로젝트를 진행하면서 페이지의 url 을 사용자에게 공유하는 기능을 구현하게 되었다.

그러면서 알게된 것이 바로 window.location 객체이다.

window.location 를 활용하면 웹페이지의 url 과 관련된 다양한 작업을 할 수 있다.

대표적으로 url 복사, 페이지 이동, 새로고침 등이 있다.

 

📌 window.location 객체란?

window.location 객체는 웹 브라우저의 현재 URL 에 관련된 정보를 제공하는 Javascript 의 객체다. 이 객체를 이용해 현재 페이지의 URL 을 가져오거나 변경할 수 있다.

 

---

 

기본 url 이 다음과 같다고 하자.

https://www.example.com:8080/path/to/page?query=example#section1

 

📌 window.location 객체 속성

속성	설명	예시
href	현재 페이지의 url
	https://www.example.com:8080/path/to/page?query=example#section1
protocol	url 의 프로토콜 부분 ex. http:, https:	https:
host	url 의 호스트 부분(도메인, 포트 포함)	http://www.example.com:8080
hostname	url 의 호스트 이름(포트 미포함)	http://www.example.com
port	url 의 포트 부분	8080
pathname	url 의 경로 부분	/path/to/page
search	url 의 쿼리 문자열	?query=example
hash	url 의 해시 부분	#section1
origin	프로토콜 + url 호스트(도메인) + 포트
	https://www.example.com:8080

 

📌 window.location 객체 매서드

메서드	속성 & 예시
assign	지정된 URL로 이동
	window.location.assign('https://www.ramincoding.tistory.com')
replace	현재 페이지의 URL을 새로운 URL로 교체 → 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 없음
	window.location.replace('https://www.ramincoding.tistory.com')
reload	현재 페이지를 다시 로드
	window.location.reload()

 

---

 

👀 window.location 객체 프로퍼티 살펴보기

window.location 객체를 살펴보기 위해 콘솔창에 window.location 을 출력해본다.

console.log(window.location)

 

결과를 보면 위에서 확인한 속성, 메서드들이 보인다.

 

---

 

📌 현재 url 복사하기

편재 페이지의 url 을 복사하기 위해서는 앞서 확인했던 window.location의 속성인 href 를 사용해야한다.

클립보드에 복사하는 방법은 다음과 같지만 브라우저에 따라 다를 수 있다.

navigator.clipboard.writeText(currentUrl)

 

Javascript

const currentUrl = window.location.href;

const copyToClipboard = (text) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
};

copyToClipboard(currentUrl);

console.log('클립보드에 복사되었습니다');

 

React

const CopyUrlButton = () => {
    const currentUrl = window.location.href;
    const handleCopyUrl = () => {
        navigator.clipboard.writeText(currentUrl)
        .then(() => {
            console.log('클립보드에 복사되었습니다');
        })
        .catch((error) => {
            console.error('클립보드 복사 실패!');
    });
};

return (
    <button onClick={handleCopyUrl}>
        현재 URL 복사하기
    </button>
);

 

 

navigator.clipboard.writeText() 메서드는 promise 를 반환하기 때문에 클립보드에 복사를 성공한다면 then 절이 시행되고, 클립보드에 복사하기 실패한다면 catch 절이 실행된다.

메서드	설명
navigator	웹 브라우저의 정보와 상태를 제공하는 객체 ex. 사용자의 위치, 환경 설정, 플러그인 등
clipboard	클립보드 API에 접근할 수 있는 속성
writeText(text)	클립보드에 주어진 텍스트를 쓰는 메서드 → Promise를 반환
Promise	비동기적으로 동작 성공하면 Promise가 resolve 되고, 실패하면 거부 reject된다.

 

 

 

 

---

참고 : chat gpt