페이지네이션 API 연동

페이지 컴포넌트에서 리스트 API를 설정해줍니다.

frontend/src/pages/sample/index.tsx

// ** API
import { getUserList } from 'src/apis/user'

// NOTE 리스트 조회 API 정의
dispatch(setListAPI(getUserList))

컨텐츠 컴포넌트에서 행에 대한 컴포넌트를 작성해줍니다.

frontend/src/components/sample/content.tsx

// ** Module
import moment from 'moment'

// ** MUI
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableRow from '@mui/material/TableRow'

// ** Const
import DATE from 'src/common/constants/date'

// ** Redux
import { RootState } from 'src/store'
import { useSelector } from 'react-redux'

const Content = () => {
  // ** Hooks
  const crud = useSelector((state: RootState) => state.crud)
  const pagination = crud.pagination

  return (
    <>
      <TableBody>
        {pagination.data.map((row: any, idx: number) => (
          <TableRow key={idx}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.account}</TableCell>
            <TableCell>{row.username}</TableCell>
            <TableCell>{row.password}</TableCell>
            <TableCell>{row.role}</TableCell>
            <TableCell>
              {row?.createdAt
                ? moment(row?.createdAt).format(DATE.DATETIME)
                : '-'}
            </TableCell>
            <TableCell>
              {row?.updatedAt
                ? moment(row?.updatedAt).format(DATE.DATETIME)
                : '-'}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </>
  )
}

export default Content

결과