React를 사용한 클라이언트 쪽 페이지 매김

안녕하세요 여러분, React로 클라이언트 쪽 페이지 매김을 구현하는 방법을 알려드리겠습니다.
애플리케이션에서 더 많은 콘텐츠를 보기 위해 애플리케이션 사용자가 지루한 스크롤링 경험을 겪게 할 필요가 없습니다. 더 많은 콘텐츠를 표시하는 데 도움이 되는 다음 또는 이전 버튼이 있으면 좋지 않을까요? 충분히 이야기하고 코드로 들어가 봅시다.
이 튜토리얼에서는 create-react-app으로 프로젝트를 설정하는 방법을 이미 알고 있다고 가정합니다.

가장 먼저 할 일은 구성 요소를 만들고 약 50명의 사용자가 표시되도록 자리 표시자에 가입하라는 요청을 만드는 것입니다. 여기에 코드가 있습니다.

import React from "react";

  const Posts 
 = () => {
    const [posts, setPosts]=useState([])

    useEffect(()=>{
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div className='body'>
            <h2 style={{textAlign:'center', marginBottom:'20px'}} >Paginations</h2>
            {posts.map((post)=>(
                <div key={post.id} style={{marginBottom:'20px'}} >
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
        </div>
    );
};

페이지 매김이 없는 모습입니다.


...
다음으로 이전 및 다음 버튼에 대한 페이지 매김 및 논리를 돕기 위해 몇 가지 상수를 만듭니다. 상수는 다음과 같습니다.

현재 페이지 번호

페이지당 표시할 항목 수

현재 페이지

페이지가 매겨진 게시물

그것은 코드에서 다음과 같이 보일 것입니다

  const Posts = () => {
    const [posts, setPosts]=useState([])
    const [pageNumber, setPageNumber]= useState(1)
    const [postNumber]= useState(5)


    const currentPageNumber = (pageNumber * postNumber) - postNumber  
    const paginatedPosts = posts.splice(currentPageNumber, postNumber)

    const handlePrev =()=>{
        if(pageNumber === 1) return
        setPageNumber(pageNumber - 1)
    }
    const handleNext =()=>{
        setPageNumber(pageNumber + 1)
    }

    useEffect(()=>{

        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div>
            <h2>Posts</h2>
            {paginatedPosts.map((post)=>(
                <div key={post.id}>
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
            <div>Page {pageNumber} </div>
            <div>
                <button onClick={handlePrev} >prev</button>
                <button onClick={handleNext}>next</button>
            </div>
        </div>
    );
};

그리고 이제 우리는 이것을 가지고 있습니다 👇



이것이 React를 사용한 간단한 페이지 매김입니다. 이것은 저의 첫 번째 기사이며 React 및 Javascript에 대해 더 많이 작성할 것입니다.

React 또는 Javascript에 대해 어려움을 겪고 있는 것이 있습니까? [email protected] 으로 메일을 보내시면 됩니다.
제가 할 수 있다면 최선을 다해 도와드리겠습니다. 건배 ❤❤