\n \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud558\ub294 \ubc29\ubc95 \uc911 \ud558\ub098\ub294 ‘\ud45c(table)’\uc785\ub2c8\ub2e4. \ud2b9\ud788 \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c, \ud45c\ub294 \uc815\ubcf4\ub97c \uccb4\uacc4\uc801\uc73c\ub85c \uc815\ub9ac\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc81c\uacf5\ud558\ub294 \ud6a8\uacfc\uc801\uc778 \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud45c\ub97c \uc5b4\ub5bb\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub294\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
1. \ub9ac\uc561\ud2b8\uc640 \ud45c\uc758 \uac04\ub2e8\ud55c \uc774\ud574<\/h2>\n
\n \ub9ac\uc561\ud2b8\ub294 UI\ub97c \uad6c\uc131\ud558\ub294\ub370 \ud544\uc694\ud55c \uc694\uc18c\ub4e4\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub77c\ub294 \ub2e8\uc704\ub85c \ub098\ub204\uc5b4 \uad00\ub9ac\ud569\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\uace0, \uc11c\ub85c \ub3c5\ub9bd\uc801\uc73c\ub85c \uc791\ub3d9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub298\uc740 \uae30\ubcf8\uc801\uc778 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\uc131\ud558\uace0, \uc774\ub97c \ud1b5\ud574 \ub370\uc774\ud130 \ubc30\uc5f4\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
2. \ub9ac\uc561\ud2b8 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8 \uc124\uacc4<\/h2>\n
\n \ud14c\uc774\ube14\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud574 \uba3c\uc800 \uae30\ubcf8\uc801\uc778 \uad6c\uc870\ub97c \uc124\uacc4\ud574\uc57c \ud569\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc124\uacc4\ud560 \ub54c, \uc5b4\ub5a4 \uc18d\uc131(props)\uc744 \ubc1b\uc744\uc9c0\ub97c \uacb0\uc815\ud558\uace0 \uac01 \uc5f4(column)\uacfc \ud589(row)\uc744 \uc5b4\ub5bb\uac8c \uad6c\uc131\ud560\uc9c0\ub97c \uba85\uc2dc\ud574\uc57c \ud569\ub2c8\ub2e4.\n <\/p>\n
2.1 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870<\/h3>\n\n \n import React from 'react';\n\n const Table = ({ data, columns }) => {\n return (\n \n \n \n {columns.map((col) => (\n {col.title}<\/th>\n ))}\n <\/tr>\n <\/thead>\n \n {data.map((row, index) => (\n \n {columns.map((col) => (\n {row[col.dataIndex]}<\/td>\n ))}\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n );\n };\n\n export default Table;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c `data`\ub294 \ud45c\uc5d0 \ud45c\uc2dc\ud560 \ub370\uc774\ud130 \ubc30\uc5f4\uc774\uace0, `columns`\ub294 \uac01 \uc5f4\uc758 \uc81c\ubaa9\uacfc \ub370\uc774\ud130 \ud0a4\ub97c \ud3ec\ud568\ud55c \ubc30\uc5f4\uc785\ub2c8\ub2e4.\n <\/p>\n
3. \ub370\uc774\ud130 \ubc0f \uc5f4 \uad6c\uc131\ud558\uae30<\/h2>\n
\n \uc774\uc81c \uc2e4\uc9c8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \ub370\uc774\ud130\uc640 \uc5f4\uc744 \uc815\uc758\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud559\uc0dd \uc815\ubcf4\ub97c \ub098\ud0c0\ub0b4\ub294 \ud14c\uc774\ube14\uc744 \uac00\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n \n const data = [\n { id: 1, name: '\ud64d\uae38\ub3d9', age: 20 },\n { id: 2, name: '\uae40\ucca0\uc218', age: 22 },\n { id: 3, name: '\uc774\uc601\ud76c', age: 21 },\n ];\n\n const columns = [\n { key: 'id', title: '\ud559\uc0dd ID', dataIndex: 'id' },\n { key: 'name', title: '\uc774\ub984', dataIndex: 'name' },\n { key: 'age', title: '\ub098\uc774', dataIndex: 'age' },\n ];\n <\/code>\n <\/pre>\n\n \uc774 \ub370\uc774\ud130\uc640 \uc5f4 \uad6c\uc131\uc744 \uac00\uc9c0\uace0, \uc55e\uc11c \ub9cc\ub4e0 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud559\uc0dd \ubaa9\ub85d\uc744 \ud45c\ud604\ud574\ubd05\ub2c8\ub2e4.\n <\/p>\n
3.1 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9 \uc608\uc2dc<\/h3>\n\n \n import React from 'react';\n import Table from '.\/Table';\n\n const App = () => {\n return (\n \n \ud559\uc0dd \ubaa9\ub85d<\/h1>\n
<\/table>\n <\/div>\n );\n };\n\n export default App;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 `App` \ucef4\ud3ec\ub10c\ud2b8\ub85c, `Table` \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud559\uc0dd \ubaa9\ub85d\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4. \uc704 \uc608\uc81c\uc5d0\uc11c\ub294 `data`\uc640 `columns`\uac00 \uac01\uae30 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub85c \uc804\ub2ec\ub429\ub2c8\ub2e4.\n <\/p>\n
4. \ud14c\uc774\ube14 \uc2a4\ud0c0\uc77c\ub9c1<\/h2>\n
\n \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubc0f CSS\ub97c \ud65c\uc6a9\ud558\uc5ec \ud14c\uc774\ube14\uc744 \uafb8\ubbf8\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uae30\ubcf8\uc801\uc778 CSS \uc2a4\ud0c0\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.\n <\/p>\n
\n \n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n th, td {\n border: 1px solid #ccc;\n padding: 8px;\n text-align: left;\n }\n\n th {\n background-color: #f2f2f2;\n }\n <\/code>\n <\/pre>\n\n \uc704\uc758 CSS \uc2a4\ud0c0\uc77c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uba74, \ud14c\uc774\ube14\uc774 \ub354 \ubcf4\uae30 \uc88b\uc740 \ud615\ud0dc\ub85c \ub514\uc790\uc778\ub429\ub2c8\ub2e4. \ud14c\uc774\ube14\uc758 \uacbd\uacc4\uac00 \uc120\uba85\ud574\uc9c0\uace0, \ud5e4\ub354 \ubd80\ubd84\uc740 \uac15\uc870\ub418\uc5b4 \ubcf4\uc785\ub2c8\ub2e4.\n <\/p>\n
5. \uae30\ub2a5\uc801\uc778 \ud14c\uc774\ube14 \ub9cc\ub4e4\uae30<\/h2>\n
\n \uc774\uc81c \uae30\ub2a5\uc801\uc778 \ud14c\uc774\ube14\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \uc815\ub82c \uae30\ub2a5\uacfc \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5\uc744 \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
5.1 \ub370\uc774\ud130 \uc815\ub82c \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h3>\n
\n \ub370\uc774\ud130\ub97c \ud074\ub9ad\ud558\uc5ec \uc815\ub82c\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. `Table` \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc815\ub82c\uae30\ub2a5\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n \n import React, { useState } from 'react';\n\n const Table = ({ data, columns }) => {\n const [sortConfig, setSortConfig] = useState(null);\n\n const sortedData = React.useMemo(() => {\n let sortableItems = [...data];\n if (sortConfig !== null) {\n sortableItems.sort((a, b) => {\n if (a[sortConfig.key] < b[sortConfig.key]) {\n return sortConfig.direction === 'ascending' ? -1 : 1;\n }\n if (a[sortConfig.key] > b[sortConfig.key]) {\n return sortConfig.direction === 'ascending' ? 1 : -1;\n }\n return 0;\n });\n }\n return sortableItems;\n }, [data, sortConfig]);\n\n const requestSort = (key) => {\n let direction = 'ascending';\n if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {\n direction = 'descending';\n }\n setSortConfig({ key, direction });\n };\n\n return (\n \n \n \n {columns.map((col) => (\n requestSort(col.dataIndex)}>\n {col.title}\n <\/th>\n ))}\n <\/tr>\n <\/thead>\n \n {sortedData.map((row, index) => (\n \n {columns.map((col) => (\n {row[col.dataIndex]}<\/td>\n ))}\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n );\n };\n\n export default Table;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 \uc815\ub82c \uae30\ub2a5\uc744 \ucd94\uac00\ud55c `Table` \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uac01 \uc5f4\uc758 \ud5e4\ub354\ub97c \ud074\ub9ad\ud568\uc73c\ub85c\uc368 \ud574\ub2f9 \ud0a4\ub97c \uae30\uc900\uc73c\ub85c \uc624\ub984\ucc28\uc21c \ub610\ub294 \ub0b4\ub9bc\ucc28\uc21c\uc73c\ub85c \uc815\ub82c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n
5.2 \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h3>\n
\n \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5\uc740 \ub370\uc774\ud130 \uc138\ud2b8\uac00 \ub108\ubb34 \ud074 \uacbd\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \ud55c \ubc88\uc5d0 \ubaa8\ub4e0 \ub370\uc774\ud130\ub97c \ubcf4\ub294 \uac83\ubcf4\ub2e4 \uc801\uc808\ud55c \ud398\uc774\uc9c0 \uc218\ub9cc\ud07c \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc774 \ub354 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.\n <\/p>\n
\n \n const PaginatedTable = ({ data, columns, rowsPerPage }) => {\n const [currentPage, setCurrentPage] = useState(0);\n const pagesCount = Math.ceil(data.length \/ rowsPerPage);\n\n const getData = () => {\n const startIndex = currentPage * rowsPerPage;\n return data.slice(startIndex, startIndex + rowsPerPage);\n };\n\n return (\n \n <\/table>\n \n {Array.from({ length: pagesCount }, (_, index) => (\n
\n import React from 'react';\n\n const Table = ({ data, columns }) => {\n return (\n \n \n \n {columns.map((col) => (\n {col.title}<\/th>\n ))}\n <\/tr>\n <\/thead>\n \n {data.map((row, index) => (\n \n {columns.map((col) => (\n {row[col.dataIndex]}<\/td>\n ))}\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n );\n };\n\n export default Table;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c `data`\ub294 \ud45c\uc5d0 \ud45c\uc2dc\ud560 \ub370\uc774\ud130 \ubc30\uc5f4\uc774\uace0, `columns`\ub294 \uac01 \uc5f4\uc758 \uc81c\ubaa9\uacfc \ub370\uc774\ud130 \ud0a4\ub97c \ud3ec\ud568\ud55c \ubc30\uc5f4\uc785\ub2c8\ub2e4.\n <\/p>\n
3. \ub370\uc774\ud130 \ubc0f \uc5f4 \uad6c\uc131\ud558\uae30<\/h2>\n
\n \uc774\uc81c \uc2e4\uc9c8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \ub370\uc774\ud130\uc640 \uc5f4\uc744 \uc815\uc758\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud559\uc0dd \uc815\ubcf4\ub97c \ub098\ud0c0\ub0b4\ub294 \ud14c\uc774\ube14\uc744 \uac00\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n \n const data = [\n { id: 1, name: '\ud64d\uae38\ub3d9', age: 20 },\n { id: 2, name: '\uae40\ucca0\uc218', age: 22 },\n { id: 3, name: '\uc774\uc601\ud76c', age: 21 },\n ];\n\n const columns = [\n { key: 'id', title: '\ud559\uc0dd ID', dataIndex: 'id' },\n { key: 'name', title: '\uc774\ub984', dataIndex: 'name' },\n { key: 'age', title: '\ub098\uc774', dataIndex: 'age' },\n ];\n <\/code>\n <\/pre>\n\n \uc774 \ub370\uc774\ud130\uc640 \uc5f4 \uad6c\uc131\uc744 \uac00\uc9c0\uace0, \uc55e\uc11c \ub9cc\ub4e0 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud559\uc0dd \ubaa9\ub85d\uc744 \ud45c\ud604\ud574\ubd05\ub2c8\ub2e4.\n <\/p>\n
3.1 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9 \uc608\uc2dc<\/h3>\n\n \n import React from 'react';\n import Table from '.\/Table';\n\n const App = () => {\n return (\n \n \ud559\uc0dd \ubaa9\ub85d<\/h1>\n
<\/table>\n <\/div>\n );\n };\n\n export default App;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 `App` \ucef4\ud3ec\ub10c\ud2b8\ub85c, `Table` \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud559\uc0dd \ubaa9\ub85d\uc744 \ud45c\ud604\ud569\ub2c8\ub2e4. \uc704 \uc608\uc81c\uc5d0\uc11c\ub294 `data`\uc640 `columns`\uac00 \uac01\uae30 \ud14c\uc774\ube14 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub85c \uc804\ub2ec\ub429\ub2c8\ub2e4.\n <\/p>\n
4. \ud14c\uc774\ube14 \uc2a4\ud0c0\uc77c\ub9c1<\/h2>\n
\n \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubc0f CSS\ub97c \ud65c\uc6a9\ud558\uc5ec \ud14c\uc774\ube14\uc744 \uafb8\ubbf8\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uae30\ubcf8\uc801\uc778 CSS \uc2a4\ud0c0\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.\n <\/p>\n
\n \n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n th, td {\n border: 1px solid #ccc;\n padding: 8px;\n text-align: left;\n }\n\n th {\n background-color: #f2f2f2;\n }\n <\/code>\n <\/pre>\n\n \uc704\uc758 CSS \uc2a4\ud0c0\uc77c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uba74, \ud14c\uc774\ube14\uc774 \ub354 \ubcf4\uae30 \uc88b\uc740 \ud615\ud0dc\ub85c \ub514\uc790\uc778\ub429\ub2c8\ub2e4. \ud14c\uc774\ube14\uc758 \uacbd\uacc4\uac00 \uc120\uba85\ud574\uc9c0\uace0, \ud5e4\ub354 \ubd80\ubd84\uc740 \uac15\uc870\ub418\uc5b4 \ubcf4\uc785\ub2c8\ub2e4.\n <\/p>\n
5. \uae30\ub2a5\uc801\uc778 \ud14c\uc774\ube14 \ub9cc\ub4e4\uae30<\/h2>\n
\n \uc774\uc81c \uae30\ub2a5\uc801\uc778 \ud14c\uc774\ube14\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \uc815\ub82c \uae30\ub2a5\uacfc \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5\uc744 \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
5.1 \ub370\uc774\ud130 \uc815\ub82c \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h3>\n
\n \ub370\uc774\ud130\ub97c \ud074\ub9ad\ud558\uc5ec \uc815\ub82c\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. `Table` \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc815\ub82c\uae30\ub2a5\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n \n import React, { useState } from 'react';\n\n const Table = ({ data, columns }) => {\n const [sortConfig, setSortConfig] = useState(null);\n\n const sortedData = React.useMemo(() => {\n let sortableItems = [...data];\n if (sortConfig !== null) {\n sortableItems.sort((a, b) => {\n if (a[sortConfig.key] < b[sortConfig.key]) {\n return sortConfig.direction === 'ascending' ? -1 : 1;\n }\n if (a[sortConfig.key] > b[sortConfig.key]) {\n return sortConfig.direction === 'ascending' ? 1 : -1;\n }\n return 0;\n });\n }\n return sortableItems;\n }, [data, sortConfig]);\n\n const requestSort = (key) => {\n let direction = 'ascending';\n if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {\n direction = 'descending';\n }\n setSortConfig({ key, direction });\n };\n\n return (\n \n \n \n {columns.map((col) => (\n requestSort(col.dataIndex)}>\n {col.title}\n <\/th>\n ))}\n <\/tr>\n <\/thead>\n \n {sortedData.map((row, index) => (\n \n {columns.map((col) => (\n {row[col.dataIndex]}<\/td>\n ))}\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n );\n };\n\n export default Table;\n <\/code>\n <\/pre>\n\n \uc704 \ucf54\ub4dc\ub294 \uc815\ub82c \uae30\ub2a5\uc744 \ucd94\uac00\ud55c `Table` \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uac01 \uc5f4\uc758 \ud5e4\ub354\ub97c \ud074\ub9ad\ud568\uc73c\ub85c\uc368 \ud574\ub2f9 \ud0a4\ub97c \uae30\uc900\uc73c\ub85c \uc624\ub984\ucc28\uc21c \ub610\ub294 \ub0b4\ub9bc\ucc28\uc21c\uc73c\ub85c \uc815\ub82c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n
5.2 \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h3>\n
\n \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5\uc740 \ub370\uc774\ud130 \uc138\ud2b8\uac00 \ub108\ubb34 \ud074 \uacbd\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \ud55c \ubc88\uc5d0 \ubaa8\ub4e0 \ub370\uc774\ud130\ub97c \ubcf4\ub294 \uac83\ubcf4\ub2e4 \uc801\uc808\ud55c \ud398\uc774\uc9c0 \uc218\ub9cc\ud07c \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc774 \ub354 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.\n <\/p>\n
\n \n const PaginatedTable = ({ data, columns, rowsPerPage }) => {\n const [currentPage, setCurrentPage] = useState(0);\n const pagesCount = Math.ceil(data.length \/ rowsPerPage);\n\n const getData = () => {\n const startIndex = currentPage * rowsPerPage;\n return data.slice(startIndex, startIndex + rowsPerPage);\n };\n\n return (\n \n <\/table>\n \n {Array.from({ length: pagesCount }, (_, index) => (\n