🔍 React의 Query String

✅ React의 Query String 활용하여 상태를 감지하고 관리하기

Query String( 쿼리 스트링 )은 URL의 한 부분으로 요청하고자 하는 URL의 부가 정보를 포함 할때 사용한다. 검색이나 정렬 등 특정 형태의 정보를 요청할 때 사용한다.

https://www.example.com/products?sort=latest

Query String: key=value 형태의 문자열로 표현

• key=value 페어의 개수 제한 없음
• ?: 쿼리스트링의 시작 표시
• &: key=value 페어 구분 표시( separator )

react-router-dom에서는 쿼리 스트링의 값을 편하게 가져올 수 있는 hook들을 기본적으로 제공해준다.

✔️ useLocation

현재 Location 객체, 즉 현재 URL에 포함된 pathname, search 등의 프로퍼티를 가지고 있다.

import { useLocation } from 'react-router-dom';

  const location = useLocation();
  const queryString = location.search;  //?sort=latest

✔️ useSearchParams

쿼리 스트링의 값을 이용해 URLSearchParams 객체를 리턴해준다.
URLSearchParams 객체는 쿼리 스트링에서 원하는 값을 얻을 수 있도록 다양한 메서드를 제공한다.
useSearchParams는 다음과 같이 호출한다.

const [searchParams, setSearchParams] = useSearchParams();

• searchParams.get(key): 특정한 key의 value를 가져오는 메서드
• searchParams.getAll(key): 특정한 key의 모든 value를 가져오는 메서드, 배열 형태로 리턴

//ex) ?sort=popular&sort=latest
searchParams.get("sort") // "popular"
searchParams.getAll("sort") // ["popular","latest"]

• searchParams.toString(): 쿼리 스트링의 값을 string 형태로 그대로 리턴

//ex) ?sort=latest&color=white
searchParams.toString() // "?sort=latest&color=white"

• searchParams.set(key, value): 메서드를 호출하면서 인자로 전달한 key 값을 value로 설정
  - 만약 동일한 key에 이미 value가 있었을 경우 설정한 값 외에는 삭제

searchParams.set("sort", "oldest")
searchParams.toString() // "?sort=oldest"

• searchParams.append(key, value): 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가하는 메서드
  • 기존의 값들을 변경하거나 삭제하지 않고 추가

searchParams.append("sort", "latest")
searchParams.toString() // sort=oldest&sort=latest"

• searchParams.delete(key): 해당 키의 파람스 삭제
• searchParams.has(key): 특정 key가 쿼리 스트링에 존재하는지 확인하고 boolean 값 반환
• searchParams.keys(): 모든 key를 순회하는 Iterator 반환

for (const key of searchParams.keys()) {
  console.log(key);
}
// "sort", "color", "page" 등

• searchParams.values(): 모든 value를 순회할 수 있는 Iterator를 반환
• searchParams.entries(): 모든 key-value 쌍을 순회할 수 있는 Iterator 반환

for (const [key, value] of searchParams.entries()) {
  console.log(`${key}: ${value}`);
}
// sort: latest
// color: white
// page: 1

• searchPars.sort(): 키를 기준으로 오름차순 정렬