내일배움캠프 TIL 70일차 - 백엔드에서 페이지네이션 처리

백엔드에서 페이지네이션 적용전 

  useEffect(() => {
    const fetchProductList = async () => {
      try {
        let url = 'http://localhost:8000/shop/products/list/';

        if (categoryId) { // 카테고리 선택시 동적으로 요청하도록
          url += `${categoryId}/`;
        }
        if (sortBy === 'hits') {
          url += '?sort_by=hits';
        } else if (sortBy === 'highprice') {
          url += '?sort_by=high_price';
        } else if (sortBy === 'lowprice') {
          url += '?sort_by=low_price';
        }

        const response = await axios.get(url);
        setProductList(response.data);
        console.log(response.data);
      } catch (error) {
        console.error('상품 목록을 불러오는 중 오류가 발생했습니다:', error);
      }
    };

  const [productList, setProductList] = useState([]);
와 같이 response.data를 setProductList의 매개변수로 넣어
porductList값을 변경시키고 이 productList값으로 
 const currentProduct = productList.slice(indexOfFirstProduct, indexOfLastProduct);
이렇게 슬라이스를 하였는데 


변경전 백엔드에서 보내준 response.data는

 과 같이 배열형태

페이지네이션을 적용한 response.data를 console.log에 찍어보면 

count: 7
next: "http://localhost:8000/shop/products/list/1/?page=2"
previous: null
results: Array(3)
0: {id: 7, product_name: '에코백', product_price: 1000111, product_stock: 1234, product_desc: '12345', …}
1: {id: 6, product_name: '에코백123', product_price: 12345, product_stock: 111, product_desc: 'qweqweqw', …}
2: {id: 5, product_name: '테스트!!', product_price: 10033, product_stock: 12346, product_desc: 'sdcfdfxczx', …}
length: 3

=> 배열형태가 아님을 알 수 있으며 results값이 배열

        setProductList(response.data.results);로 바꿔주면 됨