쿼리스트링

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

( 동적 라우팅처럼 Router 컴포넌트에 별도의 특별한 설정을 할 필요는 없다. )

? : 쿼리스트링 시작
sort=popular : key, value 형태로 표현 (하나의 페어)
& : 페어를 구분

Link 컴포넌트나 useNavigate 를 사용하여 라우팅

<Link to="/productList?sort=popular" />
navigate("/productList?sort=popular")

🧐 useSearchParams

const [searchParams, setSearchParams] = useSearchParams();

쿼리스트링을 쉽게 다룰 수 있게 여러 메서드를 제공해주는 hook 👊🏻

searchParams

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

쿼리스트링은 자바스크립트로 파싱해야 읽어낼 수 있다.
searchParams에 정의된 메서드를 호출해서 쿼리 스트링에서 원하는 값을 편리하게 가져올 수 있다.

쿼리스트링을 이용해 검색어, offset, limit 등 다양한 정보를 URL에 저장하고, 이를 활용해 UI를 구성할 수 있다.

offset 은 몇 번째 아이템부터 보여줄 것인가 ?
limit 은 한 번에 몇 개를 보여줄 것인가 ?

searchParams.get(key)

• 특정한 key의 value를 가져오는 메서드. 원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 리턴.

searchParams.getAll(key)

• 특정한 key의 value가 2개 이상일 경우, 모든 value를 불러와주는 메서드. 그냥 get은 가장 첫번째 value만 불러오기 때문에, value가 여러개이면 getAll을 쓸 수 있다.

searchParams.toString()

• 쿼리 스트링을 문자열 형태로 리턴. 가공되지 않은 쿼리 스트링의 값을 그대로 얻고 싶을 때 사용.
  ( ?sort=popular&sort=latest -> 쿼리스트링을 그대로 가져와준다. )

searchParams.set(key, value)

• 인자로 전달한 key값을 value로 설정해주는 메서드. 수정에 용이하다.
  • ?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" 로 추가됨
    
    

👇🏻 참고할만한 코드

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

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

  const setSortParams = () => {
    searchParams.set("sort", "clear");
    setSearchParams(searchParams);
  };

  const appendSortParams = () => {
    searchParams.append("sort", "hello-world");
    setSearchParams(searchParams);
  };

  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;

+ useLocation

useLocation 으로 url 정보 (쿼리스트링 포함) 를 가져올 수 있다.
그 정보의 속성들을 알아보자.
우선 location 의 기본 구조는 이렇게 생겼다.

interface Location {
  pathname: string;
  search: string;
  hash: string;
  state: unknown;
  key: string;
}

예시 )
http://www.ohaangdoo.com/productList?sort=popular&color=black#favorite
라는 주소에서 location 을 찍으면, 어느 속성에 어느 부분이 담겨 보여질까?

location.pathname

• /productList

location.search

• ?sort=popular

location.hash

• #favorite / URL의 앵커부분을 가져온다.

location.state

• 이 위치와 연결된 사용자 제공 state 개체. URL에 넣고 싶지 않은 정보를 저장하는 유용한 장소가 될 수 있다. 세션별 데이터! ( React 의 state 와 다르다 )