URLSearchParams 개념과 쿼리 사용법

JS

 

 

 

🤷‍♂️ 본론에 앞서

---

본론에 앞서 리액트(react) 프로젝트를 진행 중에 쿼리 스트링 다루기 위해서 URLSearchParams API를 활용해 쿼리 스트링을 다루면서 겪은 저의 경험을 공유해 드립니다. 

 

 

🤷‍♂️ URLSearchParams 개념

---

URLSearchParams는 JavaScript 웹 API중 하나로 URL 주소에서 가장 다루기 까다로운 쿼리 스트링을 쉽게 다룰수 있도록 돕는 객체입니다.

 

URLSearchParams MDN

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams - Web APIs | MDN

 

🤷‍♂️ 쿼리 스트링이란?

---

 

 

URL 주소를 보면 도메인 뒤에 ? 시작하는 기호를 흔히 볼 수 있습니다.

? 기호 뒤에 붙는 값들을 쿼리 스트링(Query String) 라고 부르며 key-value 형태로 이루어져 있습니다.

 

쿼리 스트링은 필터링, 페이지네이션, 정렬, 날짜 등 다양한 용도로 사용할 수 있습니다.

 

저 같은 경우는 필터링, 정렬, 날짜에 대한 값들은 쿼리스트링을 사용합니다.

 

예를 들어

https://example.com/?name=John&age=30

 

? 기호 뒤에 name=john는 key-value 형태이고 & 기호로 구분하여 새로운 key-value 형태에 쿼리스트링을 명시할 수 있습니다.

 

이 부분이 쿼리 스트링입니다.

?name=John&age=30

 

 

🤷‍♂️ URLSearchParams 사용방법

---

URLSearchParams 기본 사용법

const searchParams = new URLSearchParams(location.search);

or

const params = new URLSearchParams(window.location.search);

 

이 코드는 URLSearchParams 객체를 한 번에 생성합니다.

그래서 여러 쿼리 파라미터 값을 가져올 때 사용됩니다.

 

URLSearchParams get 사용예시

https://example.com/?name=John&age=30

const searchParams = new URLSearchParams(location.search);
const name = searchParams.get('name');

//결과값은 name에 value 값인 John 입니다.

 

여러 개 쿼리 스트링에 값들을 사용할 때 성능이나 코드 가독성 면에서 좋습니다.

 

URLSearchParams set 사용예시

const searchParams = new URLSearchParams('name=John&age=30');
searchParams.set("name", "yoo");
searchParams.set("age", 1);

결과값: ?name=yoo&age=1

 

set 메서드는 이미 존재하는 파라미터 값을 오버라이드 합니다.

 

URLSearchParams append 사용예시

const searchParams = new URLSearchParams('name=John&age=30');
searchParams.append("name", "yoo");

결과값: name=John&age=30&name=yoo

 

append 메서드는 기본 파라미터 값이 있어도 새로운 값을 추가합니다.

 

URLSearchParams delete 사용예시

const searchParams = new URLSearchParams('name=John&age=30');
searchParams.delete("name");

결과값: ?age=30

 

delete 메서드는 특정 파라미터를 삭제합니다.

 

🤷‍♂️ URLSearchParams 마지막으로

---

URLSearchParams 사용법에 대해서 정리를 해봤습니다.

 

더 다양한 URLSearchParams 객체에 메서드들이 존재하지만 저는 위에 4개 메서드를 개념을 이해하고 사용을 하셔도 실무에서 문제없이 사용하실 수 있다고 생각해서 URLSearchParams 객체에 get, set, append, delete 메서드를 정리해 봤습니다.

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

[자바스크립트 2탄] 자바스크립트 숫자 자료구조의 개념과 내장함수