리액트(React)는 사용자 인터페이스를 구축하기 위한 가장 인기 있는 라이브러리 중 하나입니다.
특히, 데이터를 시각화하는 데 있어 테이블을 구축하는 것은 사용자 경험을 향상시키는 중요한 요소입니다.
본 강좌에서는 리액트를 이용하여 복잡한 데이터를 관리하는 테이블을 구축하는 방법에 대해 살펴보겠습니다.
이 테이블은 필터링, 페이징, 정렬 기능을 포함하여, 사용자가 데이터를 효율적으로 탐색할 수 있도록 돕습니다.
1. 프로젝트 설정
리액트 프로젝트를 시작하기 위해서는 create-react-app을 사용하여 간단하게 설정할 수 있습니다.
npx create-react-app rich-data-table프로젝트 디렉토리로 이동한 후 필요한 패키지를 설치합니다.
cd rich-data-table
npm install axios react-table2. 데이터 준비
통상적으로 복잡한 데이터는 외부 API를 통해 불러옵니다.
이번 예제에서는 가상의 사용자 데이터를 JSON 형태로 이용하겠습니다.
const data = [
{ id: 1, name: 'John Doe', age: 28, email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', age: 34, email: 'jane@example.com' },
{ id: 3, name: 'Mike Johnson', age: 45, email: 'mike@example.com' },
// ... 추가 데이터
];3. 테이블 컴포넌트 만들기
데이터 테이블을 만들기 위해 React Table 라이브러리를 사용합니다.
이 라이브러리는 매우 유연하고 편리한 API를 제공합니다.
다음은 기본적인 테이블 컴포넌트를 설정하는 코드입니다.
import React from 'react';
import { useTable, useFilters, usePagination, useSortBy } from 'react-table';
const DataTable = ({ columns, data }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setFilter,
gotoPage,
pageCount,
canNextPage,
canPreviousPage,
nextPage,
previousPage,
page,
} = useTable(
{
columns,
data,
},
useFilters,
useSortBy,
usePagination
);
return (
setFilter('name', e.target.value)}
placeholder="Filter by name"
/>
{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => (
{column.render('Header')}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
))}
))}
{rows.map(row => {
prepareRow(row);
return (
{row.cells.map(cell => {
return {cell.render('Cell')} ;
})}
);
})}
{' '}
{' '}
{' '}
);
};4. 컬럼 정의하기
테이블의 컬럼을 정의하여 데이터 구조에 맞게 렌더링합니다. 아래 코드를 보면, 테이블의 각 컬럼은 제목과 렌더링 방법을 정의하고 있습니다.
const columns = [
{
Header: 'ID',
accessor: 'id', // accessor is the "key" in the data
},
{
Header: 'Name',
accessor: 'name',
},
{
Header: 'Age',
accessor: 'age',
},
{
Header: 'Email',
accessor: 'email',
},
];5. App 컴포넌트에 통합하기
마지막으로, 모든 것을 App 컴포넌트에 통합합니다.
import React from 'react';
import DataTable from './DataTable'; // DataTable 파일 경로에 따라 수정
function App() {
const data = [/* JSON 데이터 */];
const columns = [/* 컬럼 정의 */];
return (
리치 데이터 테이블
6. 결론
이 강좌에서는 리액트와 React Table 라이브러리를 사용하여 필터링, 페이징, 정렬 기능이 포함된 복잡한 데이터 테이블을 구축하는 방법에 대해 알아보았습니다.
이 같은 테이블은 대규모 데이터 세트를 효과적으로 관리하고 쉽게 탐색할 수 있도록 도와줍니다.
다음 단계로는 사용자 정의 스타일링, 더 복잡한 필터링, 다른 데이터 소스 통합 등을 시도해 보시기 바랍니다.
리액트는 강력하고 유연한 프레임워크이므로, 여러분의 다양한 요구 사항에 맞추어 확장할 수 있는 기능을 제공합니다.
이 강좌가 여러분의 리액트 개발에 도움이 되기를 바랍니다.