[react] 필터링, 페이지네이션 구현하기

나이키 웹 페이지를 모티브로 프로젝트를 진행하며 제품 전체 리스트 페이지에서 필터링과 페이지네이션 기능을 구현했습니다

아래 링크에서 어떻게 동작하는지 확인할 수 있습니다

https://user-images.githubusercontent.com/84219519/219604155-77b27b5b-8df3-42df-b837-babef7e08f93.gif

 

 

 

js 파일

import React, { useEffect, useState } from 'react';
import { useLocation, useSearchParams } from 'react-router-dom';
import Aside from './Aside/Aside';
import Banner from './Banner/Banner';
import Product from './Product/Product';
import { CATEGORY_DATA } from './Aside/data/categoryData';
import './ProductList.scss';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  const [isFilterClicked, setIsFilterClicked] = useState(false);
  const location = useLocation();
  const category = location.search;
  const [searchParams, setSearchParams] = useSearchParams();
  const limit = searchParams.get('limit');
  const page = searchParams.get('page');

 

// 여기에서 상품 데이터가 있는 api와 연결합니다

// searchParams를 이용하여 category로 카테고리에 해당하는 제품을 보여주는 url로 이동합니다

// limit과 page를 통해 한 페이지에 3개의 상품만 보여주고 다음 페이지로 이동하도록 합니다

// 페이지 이동은 버튼으로 구현했습니다

  useEffect(() => {
    fetch(
      `http://api 주소/products${category}?page=${page}&limit=${limit}`,
      {
        method: 'GET',
      }
    )
      .then(res => {
        return res.json();
      })
      .then(data => {
        setProducts(data.data);
      });
  }, [page, limit, category]);

  const onClickFilter = () => {
    setIsFilterClicked(prev => !prev);
  };

  const movePage = pageNumber => {
    searchParams.set('page', (pageNumber - 1) * 3);
    setSearchParams(searchParams);
  };

  return (
    <main className="productList">
      <Banner onClickFilter={onClickFilter} />
      <div className="contentWrapper">
        <Aside
          isFilterClicked={isFilterClicked}
          products={products}
          CATEGORY_DATA={CATEGORY_DATA}
        />
        <div className="productWrapper">
          <Product products={products} isFilterClicked={isFilterClicked} />
        </div>
      </div>
      <div>
        <button onClick={() => movePage(1)}>1</button>
        <button onClick={() => movePage(2)}>2</button>
        <button onClick={() => movePage(3)}>3</button>
      </div>
    </main>
  );
};

export default ProductList;