본문 바로가기

CodeIt_Sprint/React로 데이터 다루기7

(7)React로 데이터 다루기_7_오프셋기반_페이지네이션 구현하기 ● 이론0_ 데이터의 offset , limit , hasNext 속성 정의○ 데이터의 필드 구성 중 :offset : 현재 fetch 된 데이터의 수limit : 다음 fetch할 데이터의 수hasNext :- Api에 fetch할 데이터 수가 남아있다 => true- Api에 fetch할 데이터수가 남아있지 않다 => false● 이론1_ offset 기반 페이지네이션 구현 코드 작성하기○ 순서1_ Get 메소드의 query에 offset , limit 반영하기- Api.js//매개인자를 객체로 수정export async function getReviews({ order = "createdAt", offset = 0, limit = 6,}) { const query = `order=${orde.. 2025. 1. 2.
(6)React로 데이터 다루기_6_웹페이지를 열 때, 있는 데이터를 전부 불러오는 것이 아닌, 부분 데이터만 fetch하고, 필요할때만, 데이터를 fetch하기 => 페이지네이션(작성중..시발 존나어렵다) ● 이론1_ 페이지네이션(Pagenation) :○ 일반적 페이지네이션 예시 상황 :- 어떤 뉴스 웹페이지를 열 때, 모든 뉴스 데이터를 불러오는 것이 아닌, 일부분만 출력해주고,- '더 보기' 버튼을 누를 때, || 커서를 내릴 때, => 그 동작 후에 몇개의 데이터를 불러온다.○ 페이지 네이션 종류 : 2가지- 종류1_ 오프셋 기반 페이지네이션 : 데이터 개수를 기반으로 한 페이지네이션예) RequestGet https://example.com/posts?offset=20&limit=10해석 : offset = 20 //현재 20개의 데이터 불러온 상태인데,limit=10 //동작 후에는 10개를 더 보내주는 예약어- 서버로부터 받은 Response 내용{ "padding" : { "count.. 2024. 12. 31.
(5)React로 데이터 다루기_5_"불러오기" 버튼 없이, 웹페이지 열릴때 자동으로 데이터 fetch하기 => useEffect() 메소드 ● 이론1_ "불러오기" 버튼을 없애고, 자동으로 웹페이지 열리자마자 fetch하게 하기○ 실습 구현 코드 : - App.js : import { getReviews } from "../api";import ReviewList from "./ReviewList";import { useState } from "react";function App() { const [items, setItems] = useState([]); const handleFetchReviews = async () => { const { reviews } = await getReviews(); setItems(reviews); }; const [order, setOrder] = useState("createdAt");.. 2024. 12. 31.
(4)React로 데이터 다루기_4_json 객체 배열 데이터의 index VS 객체 배열 원소당 고유 id값, sort, 삭제 기능 복습 ● 이론0_ index를 고유한 id로 지정하여, 랜더링한다면, 어떤 문제가 존재합니까?○ 실습 구현 코드 : - ReviewList.js○ 실습 구현 코드 : import "./ReviewList.css";function ReviewItem({ key, item, onDelete }) { //2_ ReviewItem 컴포넌트에서 받은 index를 const handleDelete = () => onDelete(item.id); return ( //3_ 가장 상위 태그의 key속성에 저장 {item.title} {item.rating} {formatDate(item.createdAt)} {item.content} .. 2024. 12. 30.