React Table\uc744 \uc0ac\uc6a9\ud574 \ud544\ud130\ub9c1, \uc815\ub82c, \ud398\uc774\uc9d5 \ucd94\uac00<\/h2>\n<\/header>\n

1. \uc11c\ub860<\/h2>\n

\ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \ud45c\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ub9e4\uc6b0 \uc77c\ubc18\uc801\uc785\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 React Table<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ud65c\uc6a9\ud558\uc5ec \ub370\uc774\ud130 \ud14c\uc774\ube14\uc744 \uc0dd\uc131\ud558\uace0, \ud544\ud130\ub9c1, \uc815\ub82c, \ud398\uc774\uc9c0\ub124\uc774\uc158 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6b0\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n
2. React Table \uc18c\uac1c<\/h2>\n
React Table\uc740 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\uace0 \ud45c\uc2dc\ud558\ub294 \ub370 \ucd5c\uc801\ud654\ub41c \uacbd\ub7c9\uc758 \ud14c\uc774\ube14 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uba74\uc11c\ub3c4 \ucd5c\uc18c\ud55c\uc758 \ucf54\ub4dc\ub85c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uac83\uc774 \uc7a5\uc810\uc785\ub2c8\ub2e4. \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ub2a5\ub4e4\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4:<\/p>\n
\n
\uc815\ub82c: \uc5f4(header)\uc744 \ud074\ub9ad\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc815\ub82c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
\ud544\ud130\ub9c1: \ud2b9\uc815 \uc870\uac74\uc744 \ub9cc\uc871\ud558\ub294 \ub370\uc774\ud130\ub9cc \ubcf4\uc5ec\uc8fc\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4.<\/li>\n
\ud398\uc774\uc9d5: \ub370\uc774\ud130\uac00 \ub9ce\uc744 \uacbd\uc6b0, \ud398\uc774\uc9c0\ub97c \ub098\ub220\uc11c \ubcfc \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
\uc774\uc640 \uac19\uc740 \uae30\ub2a5\ub4e4\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc9c1\uad00\uc801\uc774\uace0 \ud6a8\uc728\uc801\uc778 \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uae30\ub2a5\ub4e4\uc744 \uc9c1\uc811 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
3. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n
\uc6b0\uc120, \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
npx create-react-app react-table-example<\/code><\/pre>\n\ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, React Table \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n cd react-table-example<\/code><\/pre>\nnpm install react-table<\/code><\/pre>\n<\/section>\n\n4. \uae30\ubcf8 \ud14c\uc774\ube14 \uc0dd\uc131\ud558\uae30<\/h2>\n\uc774\uc81c \ud14c\uc774\ube14\uc744 \uc0dd\uc131\ud558\uace0 \ub370\uc774\ud130\ub97c \ud45c\uc2dc\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c src\/App.js<\/code> \ud30c\uc77c\uc5d0 \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\n \nimport React from 'react';\nimport { useTable } from 'react-table';\n\nconst App = () => {\n const data = React.useMemo(\n () => [\n { name: 'John Doe', age: 28, job: 'Developer' },\n { name: 'Jane Smith', age: 34, job: 'Designer' },\n { name: 'Michael Johnson', age: 45, job: 'Manager' },\n \/\/ \ucd94\uac00 \ub370\uc774\ud130...\n ],\n []\n );\n\n const columns = React.useMemo(\n () => [\n { Header: '\uc774\ub984', accessor: 'name' },\n { Header: '\ub098\uc774', accessor: 'age' },\n { Header: '\uc9c1\uc5c5', accessor: 'job' }\n ],\n []\n );\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });\n\n return (\n \n \uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n \n \n {headerGroups.map(headerGroup => (\n \n {headerGroup.headers.map(column => (\n \n {rows.map(row => {\n prepareRow(row);\n return (\n \n {row.cells.map(cell => (\n \n {column.render('Header')}\n <\/th>\n ))}\n <\/tr>\n ))}\n <\/thead>\n \n {cell.render('Cell')}\n <\/td>\n ))}\n <\/tr>\n );\n })}\n <\/tbody>\n <\/table>\n <\/div>\n );\n};\n\nexport default App;\n <\/code><\/pre>\n\uc774 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9\uc790 \ubaa9\ub85d \ud14c\uc774\ube14\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4. \ub370\uc774\ud130\ub97c \ubc30\uc5f4 \ud615\uc2dd\uc73c\ub85c \uc815\uc758\ud558\uace0, \uac01 \uc5f4\uc744 \uc124\uc815\ud558\ub294 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc774 \uae30\ubcf8 \ud14c\uc774\ube14\uc744 \uac80\ud1a0\ud574 \ubcf4\uc138\uc694.<\/p>\n<\/section>\n \n5. \ud544\ud130\ub9c1 \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h2>\n\ud544\ud130\ub9c1\uc740 \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \uc870\uac74\uc5d0 \ub9de\ub294 \ub370\uc774\ud130\ub97c \uc27d\uac8c \ucc3e\uc744 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. React Table\uc5d0\uc11c\ub294 useFilter<\/code> \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud544\ud130\ub9c1 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ud544\ud130\ub9c1\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n \nimport React, { useState } from 'react';\nimport { useTable, useFilters } from 'react-table';\n\nconst App = () => {\n const [filterInput, setFilterInput] = useState(\"\");\n\n const data = React.useMemo(\n () => [\n { name: 'John Doe', age: 28, job: 'Developer' },\n { name: 'Jane Smith', age: 34, job: 'Designer' },\n { name: 'Michael Johnson', age: 45, job: 'Manager' },\n \/\/ \ucd94\uac00 \ub370\uc774\ud130...\n ],\n []\n );\n\n const columns = React.useMemo(\n () => [\n {\n Header: '\uc774\ub984',\n accessor: 'name',\n Filter: DefaultColumnFilter,\n filter: 'includes'\n },\n { Header: '\ub098\uc774', accessor: 'age' },\n { Header: '\uc9c1\uc5c5', accessor: 'job' }\n ],\n []\n );\n\n \/\/ \uae30\ubcf8 \ud544\ud130\ub9c1 UI \ucef4\ud3ec\ub10c\ud2b8\n function DefaultColumnFilter({\n column: { filterValue, setFilter }\n }) {\n return (\n {\n setFilter(e.target.value || undefined); \/\/ undefined\ub85c \uc124\uc815\ud558\uba74 \ud544\ud130\ub9c1\uc744 \uc81c\uac70\ud569\ub2c8\ub2e4.\n }}\n placeholder={`\ud544\ud130...`}\n style={{\n border: 'solid 1px black',\n borderRadius: '4px',\n padding: '4px',\n margin: '0 8px'\n }}\n \/>\n );\n }\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n initialState: { filters: [] }\n },\n useFilters \/\/ useFilters \ud6c5 \ucd94\uac00\n );\n\n return (\n \n \uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n \n \n {headerGroups.map(headerGroup => (\n \n {headerGroup.headers.map(column => (\n \n {rows.map(row => {\n prepareRow(row);\n return (\n \n {row.cells.map(cell => (\n \n {column.render('Header')}\n {column.canFilter ? column.render('Filter') : null}\n <\/th>\n ))}\n <\/tr>\n ))}\n <\/thead>\n \n {cell.render('Cell')}\n <\/td>\n ))}\n <\/tr>\n );\n })}\n <\/tbody>\n <\/table>\n <\/div>\n );\n};\n\nexport default App;\n <\/code><\/pre>\n\uc704 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uac01 \uc5f4\uc5d0 \ud544\ud130\ub9c1 \uc785\ub825 \ud544\ub4dc\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc774\ub984\uc744 \uc785\ub825\ud558\uba74 \ud574\ub2f9 \uc774\ub984\uc744 \ud3ec\ud568\ud55c \ub370\uc774\ud130\ub9cc \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uc774\uc81c \ud544\ud130\ub9c1 \uae30\ub2a5\uc744 \uc2dc\ud5d8\ud574\ubcf4\uc138\uc694.<\/p>\n<\/section>\n \n6. \uc815\ub82c \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h2>\n\uc815\ub82c \uae30\ub2a5\uc740 \ub370\uc774\ud130\ub97c \uc624\ub984\ucc28\uc21c \ub610\ub294 \ub0b4\ub9bc\ucc28\uc21c\uc73c\ub85c \ubc30\uc5f4\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. React Table\uc5d0\uc11c\ub294 \uc815\ub82c\uc774 \uae30\ubcf8\uc801\uc73c\ub85c \uc9c0\uc6d0\ub418\uba70, \ucd94\uac00\uc801\uc778 \uad6c\ud604 \uc5c6\uc774\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \nimport React from 'react';\nimport { useTable, useFilters, useSortBy } from 'react-table';\n\nconst App = () => {\n const data = React.useMemo(\n () => [\n { name: 'John Doe', age: 28, job: 'Developer' },\n { name: 'Jane Smith', age: 34, job: 'Designer' },\n { name: 'Michael Johnson', age: 45, job: 'Manager' },\n \/\/ \ucd94\uac00 \ub370\uc774\ud130...\n ],\n []\n );\n\n const columns = React.useMemo(\n () => [\n {\n Header: '\uc774\ub984',\n accessor: 'name',\n filter: 'includes'\n },\n {\n Header: '\ub098\uc774',\n accessor: 'age',\n isNumeric: true \/\/ \uc22b\uc790 \uc815\ub82c \uad00\ub828 \uc124\uc815\n },\n { Header: '\uc9c1\uc5c5', accessor: 'job' }\n ],\n []\n );\n\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data\n },\n useFilters,\n useSortBy \/\/ useSortBy \ud6c5 \ucd94\uac00\n );\n\n return (\n \n \uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n \n \n {headerGroups.map(headerGroup => (\n \n {headerGroup.headers.map(column => (\n \n {rows.map(row => {\n prepareRow(row);\n return (\n \n {row.cells.map(cell => (\n \n {column.render('Header')}\n \n {column.isSorted\n ? column.isSortedDesc\n ? ' \ud83d\udd3d'\n : ' \ud83d\udd3c'\n : ''}\n <\/span>\n <\/th>\n ))}\n <\/tr>\n ))}\n <\/thead>\n \n {cell.render('Cell')}\n <\/td>\n ))}\n <\/tr>\n );\n })}\n <\/tbody>\n <\/table>\n <\/div>\n );\n};\n\nexport default App;\n <\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c \uc8fc\ubaa9\ud560 \uc810\uc740 \uc218\uc5c5\uc744 \ucd94\uac00\ud55c \uac83\uc785\ub2c8\ub2e4. \uac01 \uc5f4\uc758 \ud5e4\ub354\uc5d0 \uc18c\ud2b8 \uad00\ub828 UI\uac00 \ucd94\uac00\ub418\uace0, \uc0ac\uc6a9\uc790\uc5d0 \uc758\ud55c \ud074\ub9ad\uc774 \ubc1c\uc0dd\ud560 \uacbd\uc6b0 \uc815\ub82c \uc0c1\ud0dc\ub97c \ubc18\uc601\ud569\ub2c8\ub2e4. \uc774 \ucf54\ub4dc\ub85c \uc815\ub82c \uae30\ub2a5\uc744 \ud65c\uc131\ud654\ud574\ubcf4\uc138\uc694.<\/p>\n<\/section>\n \n7. \ud398\uc774\uc9d5 \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h2>\n\ub370\uc774\ud130\uc758 \uc591\uc774 \ub9ce\uc744 \uacbd\uc6b0 \ud55c \ud398\uc774\uc9c0\uc5d0 \ub370\uc774\ud130\ub97c \ubaa8\ub450 \ud45c\uc2dc\ud558\ub294 \uac83\uc740 \ube44\ud6a8\uc728\uc801\uc785\ub2c8\ub2e4. \uc774\ub54c \ud544\uc694\ud55c \uac83\uc774 \ubc14\ub85c \ud398\uc774\uc9d5 \uae30\ub2a5\uc785\ub2c8\ub2e4. React Table\uc740 \ud398\uc774\uc9d5\uc744 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4.<\/p>\n \nimport React from 'react';\nimport { useTable, useFilters, useSortBy, usePagination } from 'react-table';\n\nconst App = () => {\n const data = React.useMemo(\n () => [\n { name: 'John Doe', age: 28, job: 'Developer' },\n { name: 'Jane Smith', age: 34, job: 'Designer' },\n { name: 'Michael Johnson', age: 45, job: 'Manager' },\n \/\/ \ucd94\uac00 \ub370\uc774\ud130...\n ],\n []\n );\n\n const columns = React.useMemo(\n () => [\n { Header: '\uc774\ub984', accessor: 'name', filter: 'includes' },\n { Header: '\ub098\uc774', accessor: 'age', isNumeric: true },\n { Header: '\uc9c1\uc5c5', accessor: 'job' }\n ],\n []\n );\n\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n page, \/\/ \ud604\uc7ac \ud398\uc774\uc9c0\uc5d0 \ud574\ub2f9\ud558\ub294 \ub370\uc774\ud130\ub9cc \uac00\uc838\uc634\n canPreviousPage,\n canNextPage,\n pageOptions,\n gotoPage,\n nextPage,\n previousPage,\n setPageSize,\n state: { pageIndex, pageSize }\n } = useTable(\n {\n columns,\n data,\n initialState: { pageIndex: 0 }\n },\n useFilters,\n useSortBy,\n usePagination \/\/ usePagination \ud6c5 \ucd94\uac00\n );\n\n return (\n \n \uc0ac\uc6a9\uc790 \ubaa9\ub85d<\/h1>\n \n \n {headerGroups.map(headerGroup => (\n \n {headerGroup.headers.map(column => (\n \n {page.map(row => {\n prepareRow(row);\n return (\n \n {row.cells.map(cell => (\n \n {column.render('Header')}\n \n {column.isSorted\n ? column.isSortedDesc\n ? ' \ud83d\udd3d'\n : ' \ud83d\udd3c'\n : ''}\n <\/span>\n <\/th>\n ))}\n <\/tr>\n ))}\n <\/thead>\n \n {cell.render('Cell')}\n <\/td>\n ))}\n <\/tr>\n );\n })}\n <\/tbody>\n <\/table>\n \n