동물의 숲 정보 웹페이지 만들기 3 - Tanstack Table

 

간만에 다시 들어온 동숲 프로젝트는 오류 투성이였다 ^_^

하루 종일 여기를 막으면 저기서 새어나오는 오류를 잡았고 본론은 이제서야 시작!

 

 

https://tanstack.com/table/v8

TanStack Table | React Table, Solid Table, Svelte Table, Vue Table

AG-grid를 쓸까, tanstack table을 쓸까 고민하다가 가장 최근에 썼던  tanstacktable이나 확실히 알고 가자 하고 결정했다

 

$ npm install @tanstack/react-table

 

일단 오늘의 목표는, 저번에 중구난방으로 불러왔던 동물의 숲 주민 정보들을 테이블에 넣어 출력하는 것..

그러려면 일단 1245년 전쯤 불러왔던 데이터가 어떤 식인지 확인해 봐야했다. (ㅠ_ㅠ)

 

 

 

이 중에서 일단 대충 몇 개만 추려서 컬럼으로 짰다.

 

ColumnList.ts

import { createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<any>();
export const VillagersColumns = [
  columnHelper.accessor("name", { header: "이름", size: 60 }),
  columnHelper.accessor("gender", { header: "성별", size: 60 }),
  columnHelper.accessor("species", { header: "종", size: 100 }),
];

<any>를 적어주지 않으면 다음과 같은 오류가 나온다.

 

또 <any>를 적었군.. 하면서 지금 타입을 수정하고 왔다.

 

수정한 코드

import { createColumnHelper } from "@tanstack/react-table";

interface Villager {
  name?: string;
  gender?: string;
  species?: string;
}

const columnHelper = createColumnHelper<Villager>();
export const VillagersColumns = [
  columnHelper.accessor("name", { header: "이름", size: 60 }),
  columnHelper.accessor("gender", { header: "성별", size: 60 }),
  columnHelper.accessor("species", { header: "종", size: 100 }),
];

 

 

 

---

 

그리고 이제 원하는 페이지에 불러오면 된다.

 

villager/page.tsx

import VillagerList from "./VillagerList";

export default function VillagersPage() {
  return (
    <>
      <VillagerList />;
    </>
  );
}

 

 

VillagerList.tsx

"use client"
...

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { VillagersColumns } from "@/constants/ColumnList";

...

// 주민 정보는 uniqueData에 담김 (이전 게시글)
  const table = useReactTable({
      data:uniqueData,
      columns:VillagersColumns,
      getCoreRowModel: getCoreRowModel(),
    });

  return (
    <>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} style={{ width: header.getSize() }}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );

 

 

이렇게 진행했더니 무한정 호출이 되는 오류가 났다

 

Error: Rendered more hooks than during the previous render.

 

그래서 테이블자체를 다른 component로 빼서 client로 사용되지 않게 했다.

어차피 공용으로 쓸 컴포넌트여서, 테스트만 해보고 따로 만들어두려했는데 이렇게 된거 바로 진행함

 

TanstackTable.tsx

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

export default function TanstackTable({
  data,
  columns,
}: {
  data: any[];
  columns: any[];
}) {

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} style={{ width: header.getSize() }}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}​

두번째 오류는 너무나도 자주봤지만 한번에 추가할 생각은 하지 않는 map오류..

 

TypeError: Cannot read properties of undefined (reading 'map')

 

table부분에 ?를 넣어도 오류 해결이 되지 않아서, 

  if (!data || !columns) {
    return <div>No data or columns provided.</div>;
  }

를 추가해주었더니 해결이 되었다.

그리고 이제 아까 페이지에서 data와 columns의 정보를 넘겨준다.

 

 

 

VillagersList.tsx

 <TanstackTable data={uniqueData} columns={VillagersColumns} />

 

 

 

 

다듬어야할 것이 산더미지만, 일단은 불러오는 데에 성공했다.