기존 테이블을 개선해 새로운 테이블을 만들었던 과정에 대해 얘기해보려합니다.
(어드민 빌더에 대한 사전 지식이 있으면 좋은데, 발표 전에 간단히 설명하고 넘어가겠습니당)
대충 이렇게 생겼습니다
초기의 테이블은 딱 헤더, 바디, 푸터가 있는 일반 테이블이었습니다. 사용자가 데이터소스를 만들고, 테이블에 연결하면 짜잔- 하고 데이터가 보여졌죠. 하지만 테이블에는 해줄 수 있는 더 많은 기능이 있죠. 테이블에서는 열을 정렬시킬 수도 있고, 특정 행을 선택할 수도 있고, 특정 행을 필터링하고, 페이지네이션 기능도 있습니다. 이런 기능들을 담은 테이블을 데이터 테이블, 혹은 데이터 그리드라고 말합니다.
만약 테이블이 데이터 테이블 모드로 전환되려면 어떻게 할까요? 별 거 없습니다. if문 하나 달아주면 되는거죠. 어차피 두 갠 데요 뭐. 이 때는 데이터 테이블 기능을 포함하는 외부 라이브러리를 고쳐서 사용했습니다. 외부에서 데이터 테이블로 전환하면 아예 다른 컴포넌트를 보여줬습니다. 근데 이 방식에는 문제가 있습니다. 두 개의 테이블이 하나인 것 처럼 보여야 한다는 겁니다. 데이터 테이블에 몇 개의 버튼이나 ui가 추가되긴 했어도 본질적으로는 같은 테이블처럼 보여야 하죠. 그래서 스타일이 바뀔 때에도 두 개의 테이블을 모두 바꿔주어야 했습니다. 스타일이 맞는 지도 꼼꼼히 확인해야하죠.
거기에 또 다른 위기가 찾아옵니다. 바로 서버사이드 기능의 도입이죠. 사실 앞에서 말한 페이지네이션, 정렬, 필터링같은 기능은 대부분 서버에서 수행되는 경우가 많습니다. 그렇지 않으면 브라우저에서 수십만개의 데이터를 처리해야하는 불상사가 일어나기도 하죠. 그렇다고해서 if문 분기를 하나 더 만들어 서버사이드 데이터 테이블을 하나 더 만드는건 너무 끔찍한 일입니다. 그래서 테이블을 개편하기로 결정합니다.
제가 테이블을 개편하는 작업을 맡게 되었는데요. 크게 세 가지 포인트를 중점적으로 두고 개발을 했어요. 복잡성 관리와 속도, 상태관리의 용이성입니다.
속도부터 얘기하자면, 저는 빠른 개발을 원했어요. 모든 기능을 다시 만들어야 했었지만 빠르게 개발하고 싶었습니다. 그래서 테이블 기능은 tanstack table(aka react-table)을 쓰게 되었어요.
잘 모르시는 분이 있어서 설명드리자면 headless table은 렌더링을 제외한, 테이블의 기능을 제공하는 라이브러리입니다. 다른 테이블 라이브러리처럼 컴포넌트를 제공하는게 아니라 상태와 핸들러를 제공하죠. 제가 원했던 작업의 속도도 낼 수 있으면서, 테이블 라이브러리를 뜯어고치는 css 차력쇼를 하지 않아도 되고, 관리해야할 코드가 줄어들어 코드 관리의 복잡도를 낮출수 있었고요, 테스트 코드를 적지 않아도 되고, 마침 원하던 서버사이드 기능도 있었습니다.