React로 진행중인 프로젝트에서 new URLSearchParams라는 객체를 발견하고 사용법이 궁금해서 이리저리 알아보던 중 주소창의 경로를 다룰 수 있는 브라우저의 내장 객체로써 개발할 때 도움이 많을 거 같아 글로 남기려고 한다.
1. URL 객체
new 키워드로 인스턴스 생성 및 조작할 경로를 인자로 전달한다. URL 객체만의 내장 프로퍼티로 주소의 경로를 조작할 수 있다.
// new 키워드로 URL 객체 생성
const url = new URL('http://www.zerocho.com:8080/category/HTML?hi=yena');
// 여러 프로퍼티로 주소의 일부 구성요소 조회
url.href; // 전체 웹 주소 반환 (https://www.zerocho.com:8080/category/HTML)
url.origin; //protocol에서 port 반환 (https://www.zerocho.com:8080)
url.protocol; // http: 나 http: 반환 (https:)
url.host; // www.부터 pro까지 반환 (www.zerocho.com:8080)
url.hostname; // host에서 port까지 반환 (https://www.zerocho.com)
url.port; // port 번호 반환 (8080)
url.pathname; // 상대경로 반환 (/category/HTML)
url.search; // '?'부터 hash('#')를 제외하고 반환 (?hi=yena)
구성방식: WHATWG
URL 객체는 WHATWG 방식으로 구성된다.
2. 상대경로 추가
- 상대 경로를 URL 객체에서 직접 설정할 수 있다.
new URL('추가할 상대 경로', '기본 경로');- 추가할 상대경로 앞에 붙인 '.'은 기본 경로에 추가되면 사라진다.
const url = new URL('./category/HTML', 'https://www.zerocho.com');
url.href; // 전체 경로 반환 (https://www.zerocho.com/category/HTML);3. ✨ searchParams 프로퍼티 사용
URL 객체의 searchParams는 다른 프로퍼티와는 달리, 직접 조회 / 수정이 안되고 메서드로 조작해야 하는 프로퍼티
const url = new URL('https://www.zerocho.com?hello=zerocho=yena&hi=js');
url.search; // 조회 가능 - '?'부터 hash('#') 제외하고 반환 (?hello=zerocho&hi=yena&hi=js)
url.searchParams; // (X) 불가능 - 출력시 빈 객체({}) 반환- GET 요청 시 데이터를 전달할 때 사용
예시) 변경된 페이지를 주소에 반영할 때
?page=1&limit=50이라는 주소가 있을 때 다음 페이지로 넘어가는 주소를 만들려면 page=2&limit=50으로 바꿔주어야 한다. 이때 searchParams 프로퍼티로 처리하면 편하다.
searchParams 메서드 활용
searchParams 메서드 조작하여 '?' 이하 경로의 조회 / 수정 / 삭제 예시
const url = new URL('https://www.zerocho.com?hello=zerocho&hi=yena&hi=js');
// 조회
url.searchParams.get('hello'); // 특정 param 하나 조회 (zerocho)
url.searchParams.getAll('hi'); // 특정 param의 여러 값을 모두 조회
(2개 이상일 경우 배열 : ['yena', 'js'])
// 추가 (같은 키로 여러 값을 추가하는 것도 가능)
url.searchParams.append('bye', 'java');
url.search; // '?'부터 전체 반환 (?hello=zerocho&hi=yena&hi=js&bye=java)
url.searchParams.append('bye,'ruby');
url.search; // 똑같은 'bye'로 한번 더 추가 (?hello=zerocho&hi=yena&hi=js&bye=java&bye=ruby)
// 수정 (set: 기존 키가 있다면 전부 삭제하고 새로운 내용으로 교체)
url.searchParams.set('bye', 'python');
url.search; // 기존의 bye가 모두 사라지고 python 하나로 교체 (?hello=zerocho&hi=js&bye=python)
// 삭제
url.searchParams.delete('bye');
url.search; // 특정 키로 삭제 (?hello=zerocho&hi=yena&hi=js)
4. 🔥 URLSearchParams 객체
- URL 객체보다 URLSearchParams 객체의 활용도가 더 높다.
- searchParams 부분만 단독으로 조작할 때 사용
(내장 메서드는 URL 객체의 searchParams와 동일)
const searchParams = new URLSearchParams('hello=zerocho&hi=yena&hi=js');
searchParams.set('bye', 'C#');
// URLSearchParams 객체로 만들어진 주소는 문자열로 반환해야 한다.
searchParams.toString(); // 문자열로 변환된 값 (hello=zerocho&hi=yena&hi=js&bye=C%23)
// 'C#'의 '#'이 '%23'으로 변경되었다. (특수문자)
Developer