React JS에서 라이브러리를 이용해 테이블에 데이터 표시하기

문제 상황: React JS 테이블 라이브러리 사용

React JS를 사용하면서 테이블에 데이터를 표시하고 싶은 경우가 있습니다. Stack Overflow에서는 이와 관련한 여러 질문이 있고, 가장 대표적인 라이브러리 중 하나는 react-table입니다. 이 글에서는 react-table 라이브러리를 사용하여 React JS에서 테이블에 데이터를 어떻게 표시하는지에 대해 설명합니다.

react-table 설치하기

먼저 react-table 라이브러리를 설치해야 합니다. npm이나 yarn 명령어를 이용하면 간단하게 설치할 수 있습니다.

npm install react-table

또는

yarn add react-table

데이터 구성하기

데이터는 일반적으로 배열 형태로 준비됩니다. 예를 들어, 사용자 정보가 담긴 데이터를 생각해 봅시다.

const data = [
  {
    id: 1,
    name: "김철수",
    age: 30
  },
  {
    id: 2,
    name: "이영희",
    age: 25
  },
  // 추가 데이터...
];

컬럼 설정하기

테이블의 각 열(컬럼)을 어떻게 표시할지 설정해야 합니다. react-table에서는 컬럼 설정을 아래와 같이 할 수 있습니다.

const columns = [
  {
    Header: 'ID',
    accessor: 'id'
  },
  {
    Header: '이름',
    accessor: 'name'
  },
  {
    Header: '나이',
    accessor: 'age'
  },
  // 추가 설정...
];

테이블 생성하기

마지막으로 react-table을 이용해 실제 테이블을 생성합니다.

import { useTable } from 'react-table';

// ...

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow
} = useTable({ columns, data });

return (
  <table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        // 테이블 헤더 생성
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row);
        return (
          // 테이블 바디 생성
        );
      })}
    </tbody>
  </table>
);

이렇게 하면 react-table 라이브러리를 통해 React JS에서 테이블에 데이터를 효과적으로 표시할 수 있습니다.