$$config title: [ React ] paging keywords: - paging $$ # 전체 코드 ### [ Posts.jsx ] ```java import { useState, useEffect } from "react"; import styled from "styled-components"; import Pagination from "./Pagination"; function Posts() { const [posts, setPosts] = useState([]); const [limit, setLimit] = useState(10); const [page, setPage] = useState(1); const offset = (page - 1) * limit; useEffect(() => { 데이터 가져오기 }, []); return (

게시물 목록

페이지 당 표시할 게시물 수:

{posts.slice(offset, offset + limit).map(({ id, title, body }) => ( 반복할 내용 )))}

); } export default Posts; ``` ### [ Pagination.jsx ] ```java function Pagination({ total, limit, page, setPage }) { const numPages = Math.ceil(total / limit); return ( <>

{Array(numPages) .fill() .map((_, i) => ( ))}

); } export default Pagination; ``` # 전체 게시물 목록 구현 ```Posts``` 함수 컴포넌트 작성, ```useState()``` 훅 함수로 posts라는 상태를 관리, ```useEffect()``` 훅 함수를 이용해 JSON API를 비동기로 요청하고 응답받은 게시물 뎅터를 posts 상태에 저장 # 현재 페이지에 해당하는 게시물만 보여주기 ### [ Posts.jsx ] ```java . const [limit, setLimit] = useState(10); const [page, setPage] = useState(1); const offset = (page - 1) * limit; . 페이지 당 표시할 게시물 수:

{posts.slice(offset, offset + limit).map(({ id, title, body }) => ( 반복할 내용 )))}

. ``` # 페이지네이션 ### [ Posts.jsx ] ```java . . ``` > ### 라이브러리 방법도 사용할 수 있음 ``` npm i reat-js-pagination ```