[React] 동적라우팅, Pagination 과 Query Parameter

Pagination(Paging) 이란?

무한스크롤이나 페이지넘김 버튼같은 경우. 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함. 흔히 보이는 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능이 이에 해당함. 프론트엔드에서는 Offset(현위치), Limit(컨텐츠수)를 백엔드에 전달, 백엔드는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현.

Query Parameter(Query String)

프론트엔드에서는 Offset(현위치), Limit(컨텐츠수)를 백엔드에 전달하는 과정에서 쿼리파라미터(쿼리스트링)을 사용함. 쿼리스트링이란 말 그대로 해당 엔드포인트에 대한 질의문(query)을 보내는 요청임. 예를들어, 주소 localhost:8000/products?limit=10&offset=5의 ?로 시작하는 텍스트가 쿼리스트링임. ?limit=10&offset=5의 경우 "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"는 요청으로 해석됨.

• ? 기호는 쿼리스트링의 시작을 알립니다. url 에서 ? 기호는 온리원
• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)
• parameter=value 로 필요한 파라미터의 값을 작성
• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터 넘기기 가능

useLocation().search

쿼리스트링을 이용한 페이지 네이션 기능 또한 동적 라우팅 기능과 크게 다르지 않음. 아래는 두 기능의 구현 순서 비교.

Path Parameter 에 대한 정보가 useParams 훅이 반환한 객체 안에 담겨있었음. 쿼리스트링에 대한 정보는 useLocation 훅이 반환한 객체의 search 프로퍼티 안에 담겨있음.

// current url -> localhost:3000/products?offset=10&limit=10
function ProductList() {
  const location = useLocation();
 
  console.log(location.search) // ?offset=10&limit=10

  return (
    ...
  )
}

이를 통해 url에서 쿼리스트링 정보를 받아와, 해당정보를 통해 데이터 요청

fetch(`${API}${location.search}`)
  .then(res => res.json())
  .then(res => ...)

실습

State 끌어올리기를 통해 자식인 버튼컴포넌트의 인덱스번호를 가져와 인덱스번호에 해당하는 url로 이동하고, 그에맞게 정보를 가져오기

0. index번호 가져오기(State 끌어올리기)

• useLocation을 활용하면 필요없게 될 경우도 생기니 잘 생각해서 하기!

1. 쿼리스트링 구성(URL이동)

  const navigate = useNavigate();

  const updateOffset = (buttonIndex) => {
    const limit = 20;
    const offset = 20 * buttonIndex;
    const queryString = `?limit=${limit}&offset=${offset}`;
    navigate(queryString);
  }

2. 데이터 fetching

const location = useLocation();

useEffect(() => {
  fetch(`http://localhost:8000/users${location.search}`)
    .then((res) => res.json())
    .then((res) => setUsers(res.users));
}, [location.search]);

3. 초기값 지정
   url/pagenation으로 처음 이동했을 때 location.search의 초기값이 빈 스트링이라 모든 리스트가 다 나오는 문제점 해결 fetch(http://localhost:8000/users${location.search || ?limit=20&offset=0})
   

4.Refector
limit과같은 값은 컴포넌트 밖에서 상수데이터LIMIT으로 관리하면 유지보수가 용이