TanStack Table의 철학과 헤드리스 설계

헤드리스 사용자 인터페이스 라이브러리는 필요한 모든 로직, 상태 관리, 동작을 제공하지만, 의도적으로 HTML 구조나 스타일은 전혀 제공하지 않습니다. 렌더링되는 결과의 모든 픽셀을 직접 제어할 수 있습니다.

이 철학을 따르면 CSS 재정의와 씨름하거나 라이브러리가 정한 DOM 구조를 억지로 따를 필요가 없습니다.

기존 표 컴포넌트에서는 모양을 바꾸려면 수십 개의 스타일을 재정의해야 하고, 때로는 구조적인 HTML을 우회하는 방법까지 사용해야 합니다. 헤드리스 라이브러리는 데이터와 상태만 제공하고 나머지는 개발자에게 맡깁니다.

그 결과 완전한 디자인 자유를 얻을 수 있습니다. 테일윈드, CSS 모듈, 이모션, 순수 CSS를 제약 없이 사용할 수 있습니다.

TanStack Table v8은 리액트, 뷰, 솔리드, 스벨트, 심지어 순수 JavaScript에서도 작동합니다. 핵심 로직은 프레임워크와 무관하며, 각 어댑터가 이를 익숙한 훅으로 감쌉니다.

따라서 프레임워크가 달라져도 기술을 재사용할 수 있고, 사용 방식도 일관되게 유지됩니다.

리액트에서는 useReactTable({ data, columns, getCoreRowModel })을 호출하면 표 객체가 반환됩니다. 이 객체가 모든 기능의 중심입니다.

표 객체에는 현재 상태인 정렬, 페이지 매김, 선택 정보가 모두 들어 있으며, JSX 렌더링을 제어하는 보조 메서드도 제공합니다.

TanStack Table은 사용자를 대신해 HTML 태그를 단 하나도 렌더링하지 않습니다. 직접 표, 머리글, 본문, 행, 머리글 셀, 데이터 셀 요소를 작성한 다음, 표 객체에 각 요소 안에 넣을 콘텐츠를 요청합니다.

이는 자체 DOM을 렌더링하고 제한된 사용자 지정 영역만 제공하는 AG 그리드나 앤트 디자인 테이블과는 다릅니다.

AG 그리드, 머티리얼 테이블, 앤트 디자인 테이블은 전체 렌더링 처리 과정, 기본 제공 스타일, 다양한 기능 사용자 인터페이스를 기본으로 포함합니다. 프로토타입을 만들기는 빠르지만 깊이 사용자 지정하기는 어렵습니다.

TanStack Table은 처음에 더 많은 설정이 필요하지만, 재정의 규칙과 씨름하지 않고도 접근성이 높고 브랜드에 맞는 표를 완성할 수 있습니다.

TanStack Table은 스타일을 제공하지 않고 실제로 사용하는 행 모델(정렬, 필터링, 페이지 매김)만 가져오기 때문에 차지하는 용량을 작게 유지할 수 있습니다.

활성화한 기능에 대해서만 비용을 지불하므로 성능이 중요한 애플리케이션에 적합합니다.

TanStack Table은 마크업을 생성하지 않으므로, 직접 작성한 행과 데이터 셀 요소에 클래스 이름을 추가하는 것만으로 테일윈드 CSS와 간단하게 통합할 수 있습니다. CSS 모듈이나 다른 스타일 지정 방식에서도 마찬가지입니다.

재정의할 기본 스타일이 없기 때문에 선택자 우선순위 충돌도 발생하지 않습니다.

헤드리스 방식은 처음에 더 많은 코드를 작성해야 한다는 단점이 있습니다. 렌더링 반복문을 직접 작성하고 상태 처리기도 수동으로 연결해야 합니다.

하지만 기본 표 컴포넌트를 한 번 만들면 애플리케이션 전체에서 일관된 스타일로 재사용할 수 있습니다.

useReactTable 훅은 최소한 데이터(객체 배열), 열(ColumnDef 배열), getCoreRowModel을 포함하는 구성 객체를 받습니다.

반환된 표 인스턴스는 헤더에 사용할 getHeaderGroups()와 본문 행에 사용할 getRowModel()을 제공합니다. 이 결과를 JSX에서 반복 처리하면 됩니다.

@tanstack/react-table을 설치하고, 열 배열을 정의한 다음, useReactTable을 호출하고, 보조 메서드를 사용해 직접 표 요소를 렌더링하는 순서로 시작합니다. 라이브러리는 모든 상태와 파생 데이터를 처리하고, 개발자는 모든 마크업을 담당합니다.

이처럼 역할을 명확히 나누면 표 컴포넌트를 테스트하기 쉽고 디자인 시스템도 일관되게 유지할 수 있습니다.

TanStack Table과 같은 헤드리스 사용자 인터페이스 라이브러리의 가장 큰 이점은 무엇인가요?

TanStack Table은 상태와 로직을 제공하고 모든 렌더링은 개발자에게 맡기는 헤드리스 프레임워크 비종속 표 라이브러리입니다. useReactTable을 호출해 표 인스턴스를 받은 다음, 보조 메서드를 반복 처리하여 직접 마크업을 구성합니다.

따라서 스타일 충돌이 없고 CSS 프레임워크를 자유롭게 선택할 수 있으며, 사용하는 기능에 해당하는 만큼만 번들 크기를 부담하면 됩니다.