[React] Gridsify , Data-Grid-Generator

R&D 사업을 위한 백오피스 어드민 진행 중 테이블을 제작하던 찰나, 앞으로 더 다양한 R&D 사업에 대응할 예정이라는 소식과 함께

자유로이 커스텀할 수 있는 Data-Grid-Generator를 만들어야겠다고 생각이 들었다,,

 

내가 정했던 조건들을 나열해 보자면

 

1. 어떠한 형태의 데이터 타입이든, 그리고 어떠한 키:벨류 든 큰 공수없이 호환이 가능해야 한다.

2. 각 셀을 사용자가 원하는대로 커스터마이징 할 수 있어야한다.

 

각 조건들을 해결했던 방법

먼저 어떠한 키:벨류를 만족하기 위해서 받는 데이터를 최초 한번은 지정을 해줘야한다.

테이블 컴포넌트 내에서는 new Map을 사용했고, 테이블 사용처에서는 2D String Array로 사용처의 데이터타입에 맞게 Props를 전달하도록 했다

 

// Table 사용처.tsx
// 사용처의 데이터타입에 맞게 Key를 2차원 배열로 셋팅 후 Props로 전달
const addedMap = [
    ["id", "id"],
    ["albumId", "앨범 ID"],
    ["title", "제목"],
    ["thumbnailUrl", "썸네일"],
];

...중략

// jsx
<>
 <Table addedMap={addedMap} />
</>

 

테이블 컴포넌트 내부에서는 addedMap으로 new Map을 셋팅해서 Thead와 Tbody의 Key값에 맞게 데이터를 뿌려줄 수 있게한다.

그리고 new Map을 통해서 Thead의 순서를 보장하고 순서를 변경할 수 있게 했다!

 

다음으로는 각 셀을 자유롭게 커스텀하기위해서는 다양한 고민을 했었는데 역시 가장 1차원적이고 직관적인 방법은 해당 Key에 대해서 

ReactNode, 즉 Children을 직접 내려줄 수 있게 하는 방식이였다

 

가령 예를 들자면

 

// 테이블 사용처.tsx
const addedMap = [
    ["id", "id"],
    ["albumId", "앨범 ID"],
    ["title", "제목"],
    ["thumbnailUrl", "썸네일"],
];


<>
 <Table
   addedMap={addedMap}
   tdOptions={{
     thumbnailUrl: {
       el: (item: string) => {
              return <img className="flex flex-col gap-2" src={item} alt="썸네일 이미지" />;
         }
        }
      }}
  / >
</>

 

tdOptions라는 Props를 만들고 해당 객체 안에서 커스텀하고싶은 Key를 기준으로 Children을 내려줄 수 있게 설계했다.

위의 예시의 경우 thumbnailUrl은 string형태의 url일 것이고 해당 url을 기준으로 <img />태그로 렌더하겠다고 커스터마이징 한 예시이다.

 

여기서 el을 단순히 children이 아닌 함수형태로 return하게 설계한 이유는 상황에 따라 children을, 혹은 el을 생성하는 과정에서 또 조건에 따라 분기를 나눠야할 수도 있다고 생각을했고 그러기 위해 함수형태로 설정했다!

 

사실 이 글로는 정확히 이해하고 판단하기 어려울 것이고, 이를 위해 나는 가이드문서를 따로 제작해두었다

 

https://gridsify.vercel.app/

Gridsify

https://www.npmjs.com/package/gridsify

 

gridsify