react-table 활용해 테이블 컴포넌트 만들기

얼마전 시작한 프로젝트에서 테이블 컴포넌트가 필요했습니다. 단순히 데이터를 나열하는 용도의 테이블이 아닌 정렬, 확장, 페이지네이션 등 여러 기능들이 필요한 상황입니다. 해당 기능들을 혼자서 모두 구현 하기엔 공수가 부족한 상황에 headless UI 라이브러리인 @tanstack/react-table 을 활용해 구현 하기로 결정했습니다. 강력하고 다양한 기능을 제공하고, 디자인을 제공하지 않아서 개발자가 원하는 디자인을 직접 붙일수 있다는 장점이 있습니다. 해당 라이브러리를 활용해 테이블 컴포넌트를 구현했던 과정을 시리즈로 작성해보려고 합니다. 첫 번째 포스팅은 간단하게 데이터를 디스플레이 하는 테이블을 구현했고, 다음 포스팅에는 하나 하나 기능을 붙여가는 과정을 기록해보겠습니다. 감사합니다.