쿼리스트링의 활용

 

 

페이지네이션

 

 

 

offset

-> 보여줄 순서

 

limit

-> 보여줄 양

 

 

예시

 

페이지당 10개의 아이템을 보여주는 UI를 구사한다고 했을 때

1 페이지를 보기 위해서는 0번째 이후로 10개의 아이템을 보여달라 요청해야 함

2 페이지를 보기 위해서는 11-20개의 아이템을 보여달라고 요청해야함

 

 

n번째 이후로 : offset key (start)

n개의 아이템을 보여줘 : limit key (limit)

-> 쿼리스트링 : ?offset=0&limit=10

 

 

 

 

// 페이지 네이션 샘플 api : "https://jsonplaceholder.typicode.com/posts"
// 쿼리 스트링 예시 api : "https://jsonplaceholder.typicode.com/posts/post?_start=0&_limit=10"
// 처음 접속할 때 url : "/list?offset=10&limit=10"



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


const List = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const offset = searchParams.get('offset');
  const limit = searchParams.get('limit');
  
  // useSearchParams hook 을 이용해 searchParams 형태로 가져옴
  // searchParams.get 메서드를 통해 offset, limit 변수에 저장
  // searchParams.get(key) : 특정한 key의 value 가져오는 메서드

  const [post, setPost] = useState([]);
  // api를 통해서 가져올 데이터를 담을 state
	

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts?_start=${offset}&_limit=${limit}`)
   	// 샘플 api 주소만 가져오게 되면 전체 포스트 데이터를 받아오게 됨 
      .then((res) => res.json())
      .then((result) => setPosts(result));
  }, [offset, limit]);

	// useEffect를 통해 호출한 데이터를 state에 담기
    
   const movePage = (pageNum) => {
   	searchParams.set("offset", (pageNum-1)*10); // pageNum이 1일 때 offset 0, 2일 때 offset 10
    setSearchParams(searchParams)
   }


  return (
    <section>  
      <h1>This is Posts</h1>
      {posts.map(({ id, title }) => (
        <article key={id}>
          <p>
            <div>id:{id}</div>
            <div>title:{title}</div>
          </p>
        </article>
      ))}
      
      // 페이지 네이션을 위한 버튼
      
      <div>
        <button onClick={()=>movePage(1)}>1</button>
        <button onClick={()=>movePage(1)}>2</button>
        <button onClick={()=>movePage(1)}>3</button>
      </div>
    </section>
  );
};

export default List; 



// 쿼리 스트링을 통해서 보여주고자 하는 범위 설정
// 이 값을 통해서 api에 쿼리 스트링을 포함해 호출
// 보여주고자 하는 범위를 변경하고 싶을 때 프론트엔드에서 쿼리 스트링을 변경 -> 다시 api 호출

 

 

 

 

쿼리 스트링은 URL에 부가적인 정보를 포함하고 싶을 때 사용

URL에서 쿼리  스트링이 시작된다는 표시는 ?

쿼리 스트링은 key=value 형태의 문자열로 표현, 페어를 구분할 때 & 사용

 

react-router-dom에서 쿼리 스트링을 가져올 때 useLocation, useSearchParams hook 두  가지가 있음

useSearchParams hook 이 여러 메서드를 제공해주기 때문에 편리하게 사용 가능

 

쿼리 스트링의 활용 : 검색어, offset, limit 등 다양한 정보를 URL에 저장, 이를 활용해 UI 구성 가능