React Table을 사용해 필터링, 정렬, 페이징 추가
1. 서론
리액트는 컴포넌트 기반의 UI 라이브러리로, 사용자 인터페이스를 효율적으로 구축할 수 있도록 돕습니다. 웹 애플리케이션에서 데이터를 보여주기 위해 표를 사용하는 것은 매우 일반적입니다. 이번 강좌에서는 React Table 라이브러리를 활용하여 데이터 테이블을 생성하고, 필터링, 정렬, 페이지네이션 기능을 추가하는 방법을 배우겠습니다.
2. React Table 소개
React Table은 리액트에서 데이터를 관리하고 표시하는 데 최적화된 경량의 테이블 라이브러리입니다. 강력한 기능을 제공하면서도 최소한의 코드로 쉽게 사용할 수 있는 것이 장점입니다. 이 라이브러리는 다음과 같은 기능들을 제공합니다:
- 정렬: 열(header)을 클릭하여 데이터를 정렬할 수 있습니다.
- 필터링: 특정 조건을 만족하는 데이터만 보여주는 기능입니다.
- 페이징: 데이터가 많을 경우, 페이지를 나눠서 볼 수 있도록 합니다.
이와 같은 기능들을 통해 사용자에게 직관적이고 효율적인 데이터를 제공할 수 있습니다. 이번 튜토리얼에서는 이러한 기능들을 직접 구현해보겠습니다.
3. 프로젝트 설정
우선, 리액트 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. 다음 명령어를 통해 새로운 리액트 프로젝트를 생성할 수 있습니다:
npx create-react-app react-table-example프로젝트 디렉토리로 이동한 후, React Table 패키지를 설치합니다:
cd react-table-examplenpm install react-table4. 기본 테이블 생성하기
이제 테이블을 생성하고 데이터를 표시하는 기본 코드를 작성해 보겠습니다. 다음 코드를 src/App.js 파일에 입력합니다:
import React from 'react';
import { useTable } from 'react-table';
const App = () => {
const data = React.useMemo(
() => [
{ name: 'John Doe', age: 28, job: 'Developer' },
{ name: 'Jane Smith', age: 34, job: 'Designer' },
{ name: 'Michael Johnson', age: 45, job: 'Manager' },
// 추가 데이터...
],
[]
);
const columns = React.useMemo(
() => [
{ Header: '이름', accessor: 'name' },
{ Header: '나이', accessor: 'age' },
{ Header: '직업', accessor: 'job' }
],
[]
);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
return (
사용자 목록
{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => (
{column.render('Header')}
))}
))}
{rows.map(row => {
prepareRow(row);
return (
{row.cells.map(cell => (
{cell.render('Cell')}
))}
);
})}
);
};
export default App;
이 코드를 통해 기본적인 사용자 목록 테이블이 생성됩니다. 데이터를 배열 형식으로 정의하고, 각 열을 설정하는 구조를 가지고 있습니다. 이제 이 기본 테이블을 검토해 보세요.
5. 필터링 기능 추가하기
필터링은 사용자가 특정 조건에 맞는 데이터를 쉽게 찾을 수 있도록 도와줍니다. React Table에서는 useFilter 훅을 사용하여 필터링 기능을 추가할 수 있습니다. 다음은 필터링을 적용하는 방법입니다.
import React, { useState } from 'react';
import { useTable, useFilters } from 'react-table';
const App = () => {
const [filterInput, setFilterInput] = useState("");
const data = React.useMemo(
() => [
{ name: 'John Doe', age: 28, job: 'Developer' },
{ name: 'Jane Smith', age: 34, job: 'Designer' },
{ name: 'Michael Johnson', age: 45, job: 'Manager' },
// 추가 데이터...
],
[]
);
const columns = React.useMemo(
() => [
{
Header: '이름',
accessor: 'name',
Filter: DefaultColumnFilter,
filter: 'includes'
},
{ Header: '나이', accessor: 'age' },
{ Header: '직업', accessor: 'job' }
],
[]
);
// 기본 필터링 UI 컴포넌트
function DefaultColumnFilter({
column: { filterValue, setFilter }
}) {
return (
{
setFilter(e.target.value || undefined); // undefined로 설정하면 필터링을 제거합니다.
}}
placeholder={`필터...`}
style={{
border: 'solid 1px black',
borderRadius: '4px',
padding: '4px',
margin: '0 8px'
}}
/>
);
}
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
initialState: { filters: [] }
},
useFilters // useFilters 훅 추가
);
return (
사용자 목록
{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => (
{column.render('Header')}
{column.canFilter ? column.render('Filter') : null}
))}
))}
{rows.map(row => {
prepareRow(row);
return (
{row.cells.map(cell => (
{cell.render('Cell')}
))}
);
})}
);
};
export default App;
위 코드를 통해 각 열에 필터링 입력 필드를 추가할 수 있습니다. 사용자가 이름을 입력하면 해당 이름을 포함한 데이터만 표시됩니다. 이제 필터링 기능을 시험해보세요.
6. 정렬 기능 추가하기
정렬 기능은 데이터를 오름차순 또는 내림차순으로 배열할 수 있게 해줍니다. React Table에서는 정렬이 기본적으로 지원되며, 추가적인 구현 없이도 사용할 수 있습니다.
import React from 'react';
import { useTable, useFilters, useSortBy } from 'react-table';
const App = () => {
const data = React.useMemo(
() => [
{ name: 'John Doe', age: 28, job: 'Developer' },
{ name: 'Jane Smith', age: 34, job: 'Designer' },
{ name: 'Michael Johnson', age: 45, job: 'Manager' },
// 추가 데이터...
],
[]
);
const columns = React.useMemo(
() => [
{
Header: '이름',
accessor: 'name',
filter: 'includes'
},
{
Header: '나이',
accessor: 'age',
isNumeric: true // 숫자 정렬 관련 설정
},
{ Header: '직업', accessor: 'job' }
],
[]
);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data
},
useFilters,
useSortBy // useSortBy 훅 추가
);
return (
사용자 목록
{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => (
{column.render('Header')}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
))}
))}
{rows.map(row => {
prepareRow(row);
return (
{row.cells.map(cell => (
{cell.render('Cell')}
))}
);
})}
);
};
export default App;
위 코드에서 주목할 점은 수업을 추가한 것입니다. 각 열의 헤더에 소트 관련 UI가 추가되고, 사용자에 의한 클릭이 발생할 경우 정렬 상태를 반영합니다. 이 코드로 정렬 기능을 활성화해보세요.
7. 페이징 기능 추가하기
데이터의 양이 많을 경우 한 페이지에 데이터를 모두 표시하는 것은 비효율적입니다. 이때 필요한 것이 바로 페이징 기능입니다. React Table은 페이징을 쉽게 구현할 수 있도록 도와줍니다.
import React from 'react';
import { useTable, useFilters, useSortBy, usePagination } from 'react-table';
const App = () => {
const data = React.useMemo(
() => [
{ name: 'John Doe', age: 28, job: 'Developer' },
{ name: 'Jane Smith', age: 34, job: 'Designer' },
{ name: 'Michael Johnson', age: 45, job: 'Manager' },
// 추가 데이터...
],
[]
);
const columns = React.useMemo(
() => [
{ Header: '이름', accessor: 'name', filter: 'includes' },
{ Header: '나이', accessor: 'age', isNumeric: true },
{ Header: '직업', accessor: 'job' }
],
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
page, // 현재 페이지에 해당하는 데이터만 가져옴
canPreviousPage,
canNextPage,
pageOptions,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize }
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 }
},
useFilters,
useSortBy,
usePagination // usePagination 훅 추가
);
return (
사용자 목록
{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => (
{column.render('Header')}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
))}
))}
{page.map(row => {
prepareRow(row);
return (
{row.cells.map(cell => (
{cell.render('Cell')}
))}
);
})}
페이지{' '}
{pageIndex + 1} of {pageOptions.length}
{' '}
);
};
export default App;
여기서는 페이지를 관리하는 기능을 추가했습니다. 사용자는 ‘이전’과 ‘다음’ 버튼을 통해 페이지를 전환할 수 있으며, 선택된 데이터 항목의 수를 변경할 수도 있습니다.
8. 결론
이번 강좌에서는 React Table 라이브러리를 사용하여 기본적인 데이터 테이블을 생성하고, 필터링, 정렬, 페이지네이션 기능을 추가하는 방법을 배웠습니다. 이러한 기능을 통해 사용자는 대량의 데이터에서도 편리하게 정보를 검색하고 정렬할 수 있습니다. React Table은 다양한 기능을 제공하기 때문에 요구 사항에 따라 확장하여 사용할 수 있습니다. 이제 여러분이 직접 React Table을 사용하여 원하는 기능을 구현하고, 더 나은 사용자 경험을 제공하는 애플리케이션을 만들어 보세요.