🖊️ 쿼리 스트링...?
URL의 한 부분으로 요청하고자하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.
❓ 왜 사용할까..?
일반적으로 URL을 통한 정보요청은 비교적 단순한 형태로 이루어져 특정 리소스에 대한 정보를 얻고자 한다는 단순한 형태의 요청만 URL을 통해 할 수 있었다.
<예시>
- 프론트 URL
기본경로 URL을 통해 접속하면 메인 페이지를 요청
/list URL을 통해서 접속하면 리스트 페이지를 요청
/detail URL을 통해서 접속하면 상세페이지를 요청- 백엔드 API
/signin API를 호출하면 로그인에 대한 응답
/products API를 호출하면 상품들에 대한 정보 응답
/product API를 호출하면 단일 상품에 대한 정보 응답
😖 but, 조금 더 규모가 크고 복잡한 어플리케이션에서는 단순한 형태의 요청만으로는 충분하지 못하거나 비효율적일 수 있다.
<예시>
상품이 1억개가 있을 때 유저가 /list 페이지로 접속했을 때 1억개의 모든 상품 종류를 보여주는 것은 비효율적이다.
1억개의 상품정보를 모두 가져와야 하기 때문에 시간이 오래 걸리고 실제 유저는 판매량순으로 상위 10개, 최신순 상위 10개, 리뷰 평점순 상위 10개처럼 더 정렬되고 특정된 형태의 정보를 보고싶어하기 때문이다.
이러한 상황에서 우리는 단순히 "상품 전체 리스트를 보여줘"가 아니라 "상품 리스트를 최신순으로 상위 10개만 보여줘"처럼 구체적으로 요청을 할 수 있어야 한다.
💝🔥 이때 활용할 수 있는 것이 쿼리 스트링이다!!!!!!! ⭐️💖
상품들에 대한 정보를 얻고 싶을 때 아래와 같은 API주소로 요청한다고 가정.
https://www.example.com/products
하지만 전체 상품에 대한 무작위의 정보가 아닌 인기순으로 정렬된 정보를 얻고 싶을 때 쿼리 스트링을 통해 표현한다면 이와 같은 형태가 될 것이다.
https://www.example.com/products?sort=popular
만약 데이터를 내림차순으로 정렬하고 싶다면
https://www.example.com/products?sort=popular&direction=desc
- URL에서 쿼리 스트링이 시작된다는 표시는 ? 문자를 통해서 표현
- 쿼리 스트링은 key=value 형태의 문자열로 표현
- 쿼리 스트링 내에서 각각의 key=value 페어를 구분할 때는 & 문자를 사용
쿼리 스트링을 포함한 라우팅
쿼리 스트링은 요청하고자 하는 URL에 부가적인 정보를 포함하기 위해 사용하는 것이기 때문에 따로 Router 컴포넌트에서 별도의 Route를 만들거나 path prop의 값을 수정하거나 할 필요는 없다.
라우팅 방법
-> Link 컴포넌트 :
-> useNavigate: navigate("/list?sort=popular")
-> 이동하는 컴포넌트는 ? 앞에 있는 list 컴포넌트
컴포넌트에서 쿼리스트링 가져오기
- react-router-dom에는 쿼리 스트링의 값을 가져올 수 있는 hook이 존재
- 이 hook들을 이용하면 쿼리 스트링의 값을 편하게 가져올 수 있으며 state처럼 쿼리 스트링의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공
- useLocation, useSearchParams
List.js
const List = () => {
return(
<section>
<h1>This is List Page</h1>
</section>
);
};
export default List;Router.js
import React from "react";
import { BrouserRouter, Routes, Route } from "react-router-dom";
import List from "./pages/List";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/list" element={<List />} />
</Routes>
</BrowserRouter>
);
};
export default Router;useLocation()
-> 현재의 Location 객체를 반환
Location 객체는 현재 URL에 포함된 여러 가지 정보를 가지고 있고 각각의 정보를 여러 프로퍼티로 표현하고 있다.
여러 프로퍼티 중 쿼리 스트링을 나타내는 프로퍼티는 search 프로퍼티이다.
Location 객체의 search 프로퍼티에는 URL 중 쿼리 스트링에 대한 정보가 문자열 형태로 저장되어 있고 URL의 변경에 따라 해당 값이 변경된다.
List.js
import { useLocation } from "react-router-dom";
const List = () => {
const location = useLocation();
return(
<section>
<h1>This is List Page</h1>
<p>쿼리스트링: {location.search}</p>
</section>
);
};
export default List;useSearchParams()
전체 쿼리 스트링을 하나의 문자열 형태로 표현해 주기에 이 중에서 원하는 값만 가져오려면 자바스크립트를 통해서 파싱하는 과정을 거쳐야 한다.
이러한 과정을 거치지 않고 쿼리 스트링에서 원하는 값만 얻어낼 수 있도록 다양한 메서드를 제공해 주는 URLSearchParams라는 객체가 있다.
react-router-dom에서는 쿼리 스트링의 값을 이용해서 URLSearchParams 객체를 리턴해주는 useSearchParams는 useState와 비슷하게 배열의 형태로 선언한다. 컴포넌트 안에서 쿼리스트링을 변경하고자 할 때 사용할 수 있다.
선언방법
const [searchParams, setSearchParams] = useSearchParams();선언의 방식은 state와 유사하지만 반환되는 값은 조금 차이가 있다.
-> searchParams : URLSearchParams 객체, 쿼리스트링을 다루기 위한 여러 메서드 제공
-> setSearchParams: 인자에 객체 or 문자열을 넣어주면 URL의 쿼리스트링을 변경하는 기능 제공
searchParams의 자주 사용하는 메서드
- 값을 읽어오는 메서드
-> searchParams.get(key): 특정한 key의 value를 가져오는 메서드
원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 반환된다.
만약 특정한 key에 부합하는 value가 두 개 이상일 경우라면 get 메서드는 제일 먼저 나온 value만 리턴해준다.
-> searchParams.getAll(key): key의 모든 value 값들을 얻고 싶다면 사용. 인자로 넣은 key의 모든 value를 배열의 형태로 리턴해준다.
-> searchParams.toString(): 쿼리스트링을 가공하지 않고 값을 그대로 얻고 싶을 때 사용.
- 값을 변경하는 메서드
-> searchParams.set(key, value): 인자로 전달한 key값을 value로 설정하는 메서드. 만약 동일한 key에 여러 value가 이미 존재하고 있었다면 set 메서드를 호출하면서 설정한 값 외에는 삭제된다.
-> searchParams.append(key, value): 기존의 값을 변경하거나 삭제하지 않고 추가하는 방식으로 동작하는 메서드. searchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않는다.
