웹 애플리케이션에서 데이터를 시각적으로 표현하는 방법 중 하나는 ‘표(table)’입니다. 특히 대량의 데이터를 다룰 때, 표는 정보를 체계적으로 정리하여 사용자에게 제공하는 효과적인 방법입니다. 이번 글에서는 리액트에서 표를 어떻게 구현할 수 있는지에 대해 알아보겠습니다.
1. 리액트와 표의 간단한 이해
리액트는 UI를 구성하는데 필요한 요소들을 컴포넌트라는 단위로 나누어 관리합니다. 컴포넌트는 재사용 가능하고, 서로 독립적으로 작동할 수 있습니다. 오늘은 기본적인 테이블 컴포넌트를 구성하고, 이를 통해 데이터 배열을 시각적으로 표현하는 방법을 살펴보겠습니다.
2. 리액트 테이블 컴포넌트 설계
테이블을 구성하기 위해 먼저 기본적인 구조를 설계해야 합니다. 리액트에서는 컴포넌트를 설계할 때, 어떤 속성(props)을 받을지를 결정하고 각 열(column)과 행(row)을 어떻게 구성할지를 명시해야 합니다.
2.1 테이블 컴포넌트의 기본 구조
import React from 'react';
const Table = ({ data, columns }) => {
return (
{columns.map((col) => (
{col.title}
))}
{data.map((row, index) => (
{columns.map((col) => (
{row[col.dataIndex]}
))}
))}
);
};
export default Table;
위 코드는 기본적인 테이블 컴포넌트를 정의하는 예시입니다. 여기서 `data`는 표에 표시할 데이터 배열이고, `columns`는 각 열의 제목과 데이터 키를 포함한 배열입니다.
3. 데이터 및 열 구성하기
이제 실질적으로 사용할 데이터와 열을 정의해보겠습니다. 예를 들어, 학생 정보를 나타내는 테이블을 가정해보겠습니다.
const data = [
{ id: 1, name: '홍길동', age: 20 },
{ id: 2, name: '김철수', age: 22 },
{ id: 3, name: '이영희', age: 21 },
];
const columns = [
{ key: 'id', title: '학생 ID', dataIndex: 'id' },
{ key: 'name', title: '이름', dataIndex: 'name' },
{ key: 'age', title: '나이', dataIndex: 'age' },
];
이 데이터와 열 구성을 가지고, 앞서 만든 테이블 컴포넌트를 사용하여 학생 목록을 표현해봅니다.
3.1 테이블 컴포넌트 사용 예시
import React from 'react';
import Table from './Table';
const App = () => {
return (
학생 목록
);
};
export default App;
위 코드는 `App` 컴포넌트로, `Table` 컴포넌트를 사용하여 학생 목록을 표현합니다. 위 예제에서는 `data`와 `columns`가 각기 테이블 컴포넌트에 props로 전달됩니다.
4. 테이블 스타일링
자바스크립트 및 CSS를 활용하여 테이블을 꾸미는 방법에 대해 알아보겠습니다. 먼저 기본적인 CSS 스타일을 만듭니다.
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
위의 CSS 스타일 코드를 추가하면, 테이블이 더 보기 좋은 형태로 디자인됩니다. 테이블의 경계가 선명해지고, 헤더 부분은 강조되어 보입니다.
5. 기능적인 테이블 만들기
이제 기능적인 테이블을 만들어 보겠습니다. 예를 들어, 데이터 정렬 기능과 페이지네이션 기능을 추가해보겠습니다.
5.1 데이터 정렬 기능 추가하기
데이터를 클릭하여 정렬하는 기능을 구현할 수 있습니다. `Table` 컴포넌트에 정렬기능을 추가해 보겠습니다.
import React, { useState } from 'react';
const Table = ({ data, columns }) => {
const [sortConfig, setSortConfig] = useState(null);
const sortedData = React.useMemo(() => {
let sortableItems = [...data];
if (sortConfig !== null) {
sortableItems.sort((a, b) => {
if (a[sortConfig.key] < b[sortConfig.key]) {
return sortConfig.direction === 'ascending' ? -1 : 1;
}
if (a[sortConfig.key] > b[sortConfig.key]) {
return sortConfig.direction === 'ascending' ? 1 : -1;
}
return 0;
});
}
return sortableItems;
}, [data, sortConfig]);
const requestSort = (key) => {
let direction = 'ascending';
if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
direction = 'descending';
}
setSortConfig({ key, direction });
};
return (
{columns.map((col) => (
requestSort(col.dataIndex)}>
{col.title}
))}
{sortedData.map((row, index) => (
{columns.map((col) => (
{row[col.dataIndex]}
))}
))}
);
};
export default Table;
위 코드는 정렬 기능을 추가한 `Table` 컴포넌트입니다. 각 열의 헤더를 클릭함으로써 해당 키를 기준으로 오름차순 또는 내림차순으로 정렬할 수 있습니다.
5.2 페이지네이션 기능 추가하기
페이지네이션 기능은 데이터 세트가 너무 클 경우 유용합니다. 사용자는 한 번에 모든 데이터를 보는 것보다 적절한 페이지 수만큼 보여주는 것이 더 효율적입니다.
const PaginatedTable = ({ data, columns, rowsPerPage }) => {
const [currentPage, setCurrentPage] = useState(0);
const pagesCount = Math.ceil(data.length / rowsPerPage);
const getData = () => {
const startIndex = currentPage * rowsPerPage;
return data.slice(startIndex, startIndex + rowsPerPage);
};
return (
{Array.from({ length: pagesCount }, (_, index) => (
))}
);
};
위 코드는 페이지네이션 기능을 추가한 테이블입니다. `rowsPerPage`라는 변수를 통해 한 페이지에 표시할 행의 수를 조정할 수 있습니다. 페이지 버튼을 클릭하면 해당 페이지에 맞는 데이터를 가져와 테이블에 표시합니다.
6. 결론
오늘은 리액트에서 기본적인 테이블 컴포넌트를 구현하는 방법을 살펴보았습니다. 학생 데이터를 예로 들어 기본적인 템플릿을 만들고, 정렬 및 페이지네이션 기능을 추가하여 더 유용한 컴포넌트를 제공했습니다.
이와 같은 테이블 구성은 다양한 데이터 표시 필요성이 있는 리액트 앱에서 매우 유용할 것입니다. 추가적으로 사용자의 입력에 따라 동적으로 변할 수 있는 테이블로 발전시킬 수 있습니다.
향후에는 더 복잡한 테이블을 구성하고 데이터 필터링, 검색 기능 등의 고급 기능을 공부해 보는 것도 좋을 것입니다.