쿼리스트링 1

 

쿼리스트링

 

 

 

 

 

URL의 한 부분

요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용

 

일반적으로 URL을 통한 정보 요청은 비교적 단순한 형태이다

규모가 크고 복잡한 애플리케이션에서

단순한 형태의 요청만으로는 충분하지 못하거나 비효율적이다

 

 

 

예시

 

애플리케이션에서 취급하는 상품의 종류가 1억개가 넘을 때

유저가 list로 접근 했을 때 한 페이지에 1억개를 다 넣을 수 없음

게다가 실제 유저는 판매량 순으로 상위 10개만 보는 식의 특정된 형태의 정보를 보고 싶어 함

 

이떄 활용할 수 있는 것이 쿼리스트링

 

 

 

상품에 대한 정보를 얻고 이 API 주소로 요청한다고 했을 때

http://www.example.com/products

 

인기순으로 정렬된 정보를 얻으려면 

http://www.example.com/products?sort=popular

와같은 형태로 쿼리 스트링을 통해 표현한다

 

여기서 인기순+내림차순을 요청하려면

http://www.example.com/products?sort=popular&direction=desc

이렇게 추가한다

 

?부터 시작하는 형태가 바로 쿼리 스트링 형태이다

쿼리스트링은 이름 그대로 문자열의 형태를 띠고 있으며

key=value로 표현됨

 

예시 URL에서는 sort 라는 키에 popular 라는 value를 입력해서

인기순으로 정렬된 정보를 요청한 것

 

쿼리스트링에서 표현할 수 있는 key=value 페어의 개수에 제한은 없음

하지만 여러개의 key=value 페어를 표현할 때는 각 페어를 구분하기 위한 표시가 필요하다

그래서 &을 사용한 것

 

 

 

정리

 

-> URL 에서 쿼리 스트링이 시작된다는 표시는 ? 문자를 통해서 표현

-> 쿼리 스트링은 key=value 형태의 문자열로 표현

-> 쿼리 스트링 내에서 각각의 key=value 페어를 구분할 떄는 &문자 사용 (인기순, 내림차순 등)

 

 

 

1. 기능 가져오기

 

react-router-dom 에서 쿼리 스트링을 활용하기 위해 컴포넌트에 별도 설정할 필요는 없다

요청하고자 하는 URL에 부가적인 정보를 포함하기 위해서 사용하는 것이기 때문

 

똑같이

< Link to="?sort=popular&direction=desc" />

< navigate(?sort=popular&direction=desc) />

걸어주면 된다

 

 

 

 

2. 컴포넌트에서 쿼리 스트링의 값 가져오기

 

react-router-dom 에서는 쿼리 스트링 값을 가져올 수 있는 hook 이 있음

-> useLocation, useSearchParams 

 

state 처럼 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공함

 

 

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

const List = () => {
	const location = useLocation()
    console.log(location)
    // 여러 프로퍼티가 있는 것을 확인할 수 있는데 여기서 쿼리스트링을 search 가 나타냄
    return (
    	<section>
        	<h1> this is list page </h1>
            <p> 쿼리스트링 {location.search} </p> // '쿼리스트링 ?sort=popular' 출력 
            // 이때 ? 뒤에 popular 값을 가져오려면 js를 통해 (?뒤에 sort 다음 popular 얻기) 가져와야함
            // 하지만 &가 계속 이어지면 이런 작업이 너무 힘듬
            // 이때 다양한 메서드를 제공해주는 URLSearchParams 라는 객체가 있음
            <p> 쿼리스트링 </p> 
        </section>
    );
};

export default List;

 

 

useSearchParams (hook)
: useState와 비슷하게 배열의 형태로 searchParams와 setSearchParams 함수를 리턴

 

const [searchParams,setSearchParams] = useSearchParams();

 

searchParams : URLSearchParams 객체, 쿼리스트링을 다루기 위한 여러 메서드 제공

SetsearchParams :  함수를 호출하면서 인자로 객체 또는 문자열을 넣어주면 URL의 쿼리스트링을 변경하는 기능 제공

   -> 컴포넌트 안에서 쿼리스트링을 변경하고자 할 때 사용

 

 

 

 

SearchParams의 자주 사용되는 메서드

 

 

1. 값을 읽어오는 메서드

 

searchParams.get(key)

: 특정한 key의 value 가져오는 메서드

 

-> 원하는 쿼리 스트링의 키를 인자로 넣어서 메서드를 호출하면 value 가 반환됨

-> 키 하나에 값이 두 개라면 get 메서드는 제일 먼저 나온 value만 리턴함

 

 

searchParams.getAll(key)

: 특정한 key에 해당하는 모든 value 를 가져오는 메서드

 

 

searchParams.toString()

: 쿼리스트링을 메서드를 통해 가공하지 않고 그대로 얻고 싶을 때

: 쿼리스트링을 string 형태로 리턴

 

 

 

 

2. 값을 변경하는 메서드

 

 

searchParams.set(key, value)

: 인자로 전달한 key 값을 value로 설정하는 메서드 

 

searchParams.append(key, value)

: 인자로 전달한 key 값을 value로 추가하는 메서드 (기존의 값 변경 x)

 

-> searchParams를 변경하는 메서드를 이용해서 값을 변경하더라도 실제 URL 쿼리 스트링은 변경되지 않음

-> 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 함

 

 

 

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

const List = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const setSortParams = () => {
    searchParams.set('sort', 'clear');
    // sort라는 키에 clear라는 value 를 설정
    // sort 키에는 clear라는 value만 남고 모두 사라지게 됨
    setSearchParams(searchParams); // 현재 URL의 쿼리 스트링을 변경
  };

  const appendSortParams = () => {
    searchParams.append('sort', 'hello-world'); // sort 키에 값 hello-world 설정
    setSearchParams(searchParams); // append이기때문에 hello-world 라는 value 추가됨
  };

  return (
    <section>
      <h1>This is List Page</h1> 
      <p>
        toString: <b>{searchParams.toString()}</b>
      </p>
      <p>
        get("sort"): <b>{searchParams.get('sort')}</b>
      </p>
      <p>
        getAll("sort"):
        {searchParams.getAll('sort').map((value) => (
          <b key={value}>{value} </b>
        ))}
      </p>
      <button onClick={setSortParams}>setSortParams</button>
      <button onClick={appendSortParams}>appendSortParams</button>
    </section> 
  ); 
};

export default List;

  

 

 

쿼리 스트링은 검색, 필터링, 페이지네이션 등 다양한 형태로 활용가능함