목록 형태

게시판 글의 목록을 2, 3, ... 장의 목록을 볼 수 있도록 만든 것

import { useQuery, gql } from "@apollo/client";
import styled from '@emotion/styled'

const FETCH_BOARDS = gql`
    query fetchBoard($page: Int) {
        fetchBoards(page: $page){
        _id
        writer
        title
        contents
        }
    }
`;

const MyRow = styled.div`
    display: flex;
`
const MyColumn = styled.div`
    /* width: 100%; */
`


export default function staticRoutedPage() {
    const { data, refetch } = useQuery(FETCH_BOARDS)

    const onClickPage = (event) =>{
        refetch({page : Number(event.target.id)})
        
    }

    console.log(data);

    return (
        <div>
            {data?.fetchBoards.map((el, index) => (
            <MyRow key={el.number}>
                <MyColumn>{el._id.slice(0,4)}</MyColumn>
                <MyColumn> {el.writer}</MyColumn>
                <MyColumn>{el.title}</MyColumn>
                <MyColumn>{index}</MyColumn>
            </MyRow>
            ))}
            {
                // [1,2,3,4,5,6].map((el) => (
                //     <span key={el} onClick={onClickPage} id={String(el)}>{el}</span>
                // ))

                new Array(10).fill(1).map((_, index) => (
                    <span key={index+1} onClick={onClickPage} id={String(index+1)}>{index+1}</span>
                ))
            

            }
            {/* <span onClick={onClickPage} id="1">1</span>
            <span onClick={onClickPage} id="2"> 2</span>
            <span onClick={onClickPage} id="3"> 3</span> */}
        </div>
    );
}

주석으로 처리한 반복되는 부분을 배열에 담아 map으로 반복될 수 있도록 한다.

페이지를 넘기기 위해 초기값이 1인 startPage state를 만들고,
이전페이지는 직전에 받은 값인 prev에서 -10,
다음페이지는 prev+10 을 해주고, 버튼과 바인딩한다.

	const [startPage, setStartPage] = useState(1)

    const onClickPrevPage = () =>{
        setStartPage((prev) => prev - 10)
    }

    const onClickNextPage = () =>{
        setStartPage((prev) => prev + 10)
    }
    
               <span onClick={onClickPrevPage}>이전페이지</span>
            {
                new Array(10).fill(1).map((_, index) => (
                    <span key={index + startPage} onClick={onClickPage} id={String(index)}>{index + startPage}</span>
                ))         
            }
            <span onClick={onClickNextPage}>다음페이지</span>