[TIL] 리액트 쿼리스트링

쿼리스트링이란?

URL의 한 부분으로 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶은 경우 사용

쿼리스트링의 사용 예시

http://myhomepage.com/products?sort=popular&sort=new

• url에서 ?를 통해 쿼리스트링이 시작된다는 표현을 할 수 있다
• 쿼리스트링은 key=value 형태의 문자열로 표현된다
• 쿼리스트링 내부에서 key=value 페어를 구분할 때는 & 연산자를 이용한다.

리액트에서 쿼리스트링을 사용하는 경우
<Link to="/products?sort=new" />
navigate("/products?sort=new") 와 같이 사용 가능하며
렌더링은 /products URL에 해당하는 컴포넌트를 그려준다.

리액트에서 쿼리스트링 가져오기

앞선 포스팅과 같이 react-router-dom 에서 제공하는 useLocation() Hook을 사용하면 /products 라는 pathname과 함께 ?sort=new 라는 search 값도 가져올 수 있게됩니다.

useLocation

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

// ex) url : https://velog.io/products?queryString

function Products() {
  const location = useLocation();
  console.log(location) // {pathname: '/products', search: '?queryString', hash: '', state: null, key: 'cfkmpx77'}
  console.log(location.pathname) // '/products'
  console.log(location.search) // '?queryString'
  
  return (    
    <div>Products</div>
  )
}

그러나 우리가 가져오기 원하는 쿼리스트링 부분에 key=value 페어가 많아지게 되면
원하는 정보만 파싱하는 것이 어려워지게 됩니다.

useSearchParams Hook은 이러한 문제를 해결해 주며 더 나은 기능을 제공해줍니다.

useSearchParams

import { useSearchParams } from 'react-router-dom'

// ex) url : https://velog.io/products?queryString

function Products() {
  const [ searchParams, setSearchParams ] = useSearchParams();
  
  return (    
    <div>Products</div>
  )
}

useSearchParams Hook 은 useState와 비슷하게
searchParams와 setSearchParams를 배열의 형태로 리턴해주는데
위의 예시코드와 같이 사용하면 원하는 쿼리스트링 값을 얻을수도, 설정해 줄 수도 있습니다.

searchParams : URLSearchParams 객체, 쿼리스트링을 다루기 위한 여러 메서드 제공
setSearchParams : 인자에 객체 or 문자열을 넣어 URL의 쿼리스트링 변경

searchParams의 다양한 기능

• get
  searchParams.get(key) : 특정한 key의 value 값 가져오기
  searchParams.getAll(key) : 특정한 key의 모든 value 값 가져오기
  searchParams.toString() : 쿼리스트링 전체를 문자열로 리턴
• set
  searchParams.set(key, value) : 전달한 key값을 value로 설정
  searchParams.append(key, value) : 기존 값을 유지한 채 (key=value) 페어를 추가함
  searchParams.delete(key) : 전달한 key값에 해당하는 모든 쿼리문 삭제

searchParams로 쿼리스트링을 세팅해주는 경우
setSearchParams 메서드로 적용을 시켜주어야 url에 반영이 된다.