리액트로 복잡한 테이블 구축하기, 리치 데이터 테이블을 위한 필터링, 페이징, 정렬 처리

리액트(React)는 사용자 인터페이스를 구축하기 위한 가장 인기 있는 라이브러리 중 하나입니다.
특히, 데이터를 시각화하는 데 있어 테이블을 구축하는 것은 사용자 경험을 향상시키는 중요한 요소입니다.
본 강좌에서는 리액트를 이용하여 복잡한 데이터를 관리하는 테이블을 구축하는 방법에 대해 살펴보겠습니다.
이 테이블은 필터링, 페이징, 정렬 기능을 포함하여, 사용자가 데이터를 효율적으로 탐색할 수 있도록 돕습니다.

1. 프로젝트 설정

리액트 프로젝트를 시작하기 위해서는 create-react-app을 사용하여 간단하게 설정할 수 있습니다. 

npx create-react-app rich-data-table

프로젝트 디렉토리로 이동한 후 필요한 패키지를 설치합니다. 

cd rich-data-table
npm install axios react-table

2. 데이터 준비

통상적으로 복잡한 데이터는 외부 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 => (
                                
                            ))}
                        
                    ))}
                
                    {rows.map(row => {
                        prepareRow(row);
                        return (
                            
                                {row.cells.map(cell => {
                                    return ;
                                })}
                            
                        );
                    })}
                

                

                                    {column.render('Header')}
                                    
                                        {column.isSorted
                                            ? column.isSortedDesc
                                                ? ' 🔽'
                                                : ' 🔼'
                                            : ''}
                                    
                                

                
{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 (
        

            
리치 데이터 테이블

            
        

    );
}

export default App;

6. 결론

이 강좌에서는 리액트와 React Table 라이브러리를 사용하여 필터링, 페이징, 정렬 기능이 포함된 복잡한 데이터 테이블을 구축하는 방법에 대해 알아보았습니다.
이 같은 테이블은 대규모 데이터 세트를 효과적으로 관리하고 쉽게 탐색할 수 있도록 도와줍니다.
다음 단계로는 사용자 정의 스타일링, 더 복잡한 필터링, 다른 데이터 소스 통합 등을 시도해 보시기 바랍니다.

리액트는 강력하고 유연한 프레임워크이므로, 여러분의 다양한 요구 사항에 맞추어 확장할 수 있는 기능을 제공합니다.
이 강좌가 여러분의 리액트 개발에 도움이 되기를 바랍니다.