React 쿼리 스트링

쿼리 스트링의 정의와 필요성

정의
: 쿼리 스트링은 URL의 한 부분으로서, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.

필요성
: 규모가 크고 복잡한 애플리케이션에서는 단순한 형태의 요청만으로 충분하지 못하거나 비효율적일 수 있다. 상품의 종류가 1억개라고 가정하면, 1억개를 다가져오는건 비효율적이기 때문이다. 이때 쿼리 스트링을 사용하여 판매량순 상위 10개, 리뷰 평점순으로 상위 10개처럼 특정된 형태의 정보를 보고 싶어하기 때문이다.

쿼리 스트링의 형태

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

ex) https://www.example.com/products?sort=popular&direction=desc

react-router-dom에서 쿼리 스트링의 사용

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

  특별히 다른 방법은 없다. <Link to="/list?sort=popular" />, navigate("/list?sort=popular") 처럼 단순하게 URL을 전달해 주면 된다.

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

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

useLocation hook

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

import React from 'react';
import { useLocation } from 'react-router-dom';
const List = () => {
  const location = useLocation();//
  const queryString = location.search;// 이렇게 search 프로퍼티가 내장되어 있다.
  return (
    <section>
      <h1>This is List Page</h1>
      <p>
        쿼리 스트링: <b>{queryString}</b>
      </p>
    </section>
  );
};
export default List;

useSearchParams hook

useLocation hook을 통해서 쿼리 스트링의 값을 읽을 수 있게 되었지만 useLocation을 통해서 가져온 쿼리스트링은 불편함이 있다.

전체 쿼리 스트링을 하나의 문자열 형태(?sort=popular)로 표현해 주기때문에 이 중에 원하는 값만 가져오려면 문자열을 Parsing하는 과정을 거쳐야 한다.
파싱하는 과정을 거치지 않고 원하는 값만 얻어 낼 수 있도록 다양한 메서드를 제공해 주는 URLSearchParams라는 객체가 있다.

1. 값을 읽어오는 메서드

• searchParams.get(key) : 특정한 key의 value를 가져오는 메서드입니다. 원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 리턴됩니다.
• searchParams.getAll(key) : 특정한 key에 부합하는 value가 두 개 이상일 경우 라면 get 메서드는 제일 먼저 나온 value만 리턴해줍니다. 만약 모든 value 값들을 얻고 싶다면 getAll 메서드를 이용해야 합니다. getAll 메서드는 해당 key에 해당하는 모든 value를 배열의 형태로 리턴해줍니다.
• ?sort=popular&sort=latest의 경우
• searchParams.get("sort")의 리턴값: "popular"
• searchParams.getAll("sort")의 리턴값: ["popular","latest"]
• searchParams.toString() : 쿼리 스트링을 string 형태로 리턴해줍니다. searchParams는 객체이기 때문에 여기서 가공되지 않은 쿼리 스트링의 값을 그대로 얻고 싶다면 toString 메서드를 호출하면 됩니다.
• ?sort=popular&sort=latest의 경우
• searchParams.toString()의 리턴값: "?sort=popular&sort=latest"

2. 값을 변경하는 메서드

• searchParams.set(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 설정하는 메서드입니다. 만약 동일한 key에 여러 value가 이미 존재하고 있었다면, set 메서드를 호출하면서 설정한 값 외에는 삭제됩니다.
• ?sort=popular&sort=latest 의 경우
• searchParams.set("sort", "clear") 호출
• searchParams.toString()의 리턴값: "?sort=clear"
• searchParams.append(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가하는 메서드입니다. set 메서드와는 다르게 기존의 값들을 변경하거나 삭제하지 않고 추가하는 방식으로 동작합니다.
• ?sort=popular&sort=latest 의 경우
• searchParams.append("sort", "clear") 호출
• searchParams.toString()의 리턴 값: "?sort=popular&sort=latest&sort=clear"
• searchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않습니다. 변경된 searchParams를 이용해서 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 합니다