쿼리스트링

이진경·2023년 1월 8일

👩‍💻 REACT

목록 보기

6/10

✅ 쿼리스트링의 정의

쿼리스트링은 url의 한 부분으로서 요청하고자하는 url에 부가적인 정보를 포함하고 싶을 때 사용한다.
예를들면 상품리스트를 최신순 / 인기순 등으로 보여달라는 구체적인 요청을 할 때 필요로 한다.
(쿼리스트링의 형태)

쿼리스트링은 key=value형태로 표현되고 시작점은 ?를 통해 표현된다.
쿼리스트링 내에서 각각 key=value 페어를 구분할 떄는 & 문자를 사용한다.

✅ react-roouter-dom에서의 사용

✍️ 쿼리스트링을 포함해서 Routing하기

<Link to="/lilst?sort=popular" />, navigate("/list?sort=popular") 처럼 단순하게 Link 컴포넌트나 navigate 함수의 인자에 쿼리 스트링이 포함된 url을 전달해주면 된다.

✍️ 컴포넌트에서 쿼리스트링 값 가져오기

쿼리스트링을 가져올 때 사용할 수 있는 hook은 useLocation,useSearchParams 2가지가 있다.

👉 useLocation hook

useLocation hook은 현재 location 객체를 리턴한다. location 객체는 말 그대로 현재 위치(url)에 포함된 여러가지 정보를 가지고 있다.
이 프로퍼티 중 쿼리스트링을 나타내는 프로퍼티는 search이다. search에는 쿼리스트링에 대한 정보가 문자열 형태로 저장되어 있다.

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

const List = () => {
  const location = useLocation();
  const queryString = location.search;

  return (
    <section>
      <h1>This is List Page</h1>
      <p>
        쿼리 스트링: <b>{queryString}</b>
      </p>
    </section>
  );
};

export default List;

👉 useSearchParams hook ❗️

useLocation hook은 전체 쿼리 스트링을 하나의 문자열로 표현해주기에 원하는 값만 가져오려면 js를 통해 pashing하는 과정이 필요하다.
URLSearchParams은 이러한 과정을 거치지 않고 쿼리스트링에서 원하는 값만 얻어 낼 수있게 해준다.
URLSearchParams는 객체를 리턴해주기위해 useSearchParam라는 hook을 제공한다.

const [searchParams, setSearchParams] = useSearchParams();

useSearchParams hook을 호출하면 useState와 비슷하게 배열의 형태로 searchParams와 setSearchParams 함수를 리턴해준다.

:: 값을 읽어오는 메서드

searchParams.get(key) : 특정한 key의 value를 가져오는 메서드
searchParams.getAll(key) : 특정한 Key에 해당하는 모든 value를 가져오는 메서드
searchParams.toString() : 쿼리스트링을 string형태로 리턴

:: 값을 변경하는 메서드

searchParams.set(key, value) : 인자로 전달한 key값을 value로 설정하는 메서드 / 기존값은 삭제됨
searchParams.append(key, value) : 기존 값을 변경하거나 삭제하지 않고 추가하는 방식으로 동작하는 메서드