예를 들어 상품이 수천개라고 가정했을때, 유저가 /list페이지로 접속 했을때 수천개의 상품을 모두 보여주는것은 비효율적인데 이유는 모든 상품을 가져오는데까지 시간이 오래걸리고 실제 유저는 판매량순, 최신순, 평점순 등으로 더 정렬되고 특정된 형태의 정보를 보고싶어하기 때문이다. 이때 활용할 수 있는것이 쿼리 스트링 이다.
<Link to = "/list?sort=popular" />
<Link to = "/list?sort=popular" />
이경로를 예를 들면 list 컴포는트가 보여지게 된다.)// src/List.js
import React from 'react';
const List = () => {
return (
<section>
<h1>This is List Page</h1>
</section>
);
};
export default List;
// src/Router.js
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import List from './List';
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/list" element={<List />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
값을 읽어오는 메서드
-> searchParams.get(key) : 특정한 key의 value를 가져오는 메서드로서 원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 반환된다.
-> searchParams.getAll(key) : 특정한 key에 해당하는 모든 value를 가져오는 메서드로 인자에 넣은 key에 해당하는 모든 value를 배열의 형태로 리턴해줍니다.
-> searchParams.toString() : 쿼리 스트링을 string 형태로 리턴
(쿼리 스트링을 위 메서드들을 이용해 가공하지않고 값을 그대로 얻고 싶을때)
값을 변경하는 메서드
-> searchParams.set(key, value) : 인자로 전달한 key값을 value로 설정하는 메서드(동일한 key에 여러 value가 이미 존재하고 있었다면 set 메서드를 호출하면서 설정한 값 외에는 삭제)
-> searchParams.append(key, value) : 기존 값을 변경하거나 삭제하지 않고 추가하는 방식으로 동작하는 메서드
serarchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 url의 쿼리 스트링은 변경되지 않는다. 실제 쿼리 스트링을 변경시키려면 setSearchParams함수에 searchParams를 인자로 전달하면서 호출해야 한다.
쿼리 스트링은 검색, 필터링, 페이지네이션 등 다양한 형태로 활용될 수 있다.
페이지네이션을 구현하기 위해서는 크게 offset, limit 두가지의 기준이 필요하다.
offset(보여줄 순서)
몇번째 아이템부터 보여줄것인가에 대한 정보
limit(보여줄 양)
한번에 몇게의 아이템을 보여줄지에 대한 정보