[React] 컴포넌트를 제네릭 함수로 쓰기 - 테이블 컴포넌트 추상화

귀찮은 일은 꽤나 자주 일어난다. 외주 작업 중 테이블 컴포넌트를 구현해야하는 일이 있었고, 기존 코드는 Core UI라는 라이브러리를 사용하고 있었다. 라이브러리가 4.0버전으로 업그레이드 되면서 PRO버전이 새로 생겼고, 그를 위한 급나누기에 테이블 컴포넌트가 걸려버렸다. 기존에 사용하던 onRowClick, scopedSlots등의 기능들이 사라졌고 직접 구현해야 했다.

 

<Table
  paginationState={[current, setCurrent]}
  column={column}
  data={data}
  onRowClick={data => {
    navigate(`/notices/${data.id}`);
  }}
  customCellItem={{
    info: data => <button onClick={() => alert(data.index)}>커스텀cell</button>,
    date: data => <div style={{color: 'red'}}>{data.date}</div>,
  }}
/>;

추상화된 Table은 상위 컴포넌트는 위와 같이 사용할 수 있다. 컬럼과 data 배열을 넘겨주면 컴포넌트 내부적으로 이러쿵저러쿵해서 테이블을 멋있게 그려주는 동작이 추상화되어 있다.

 

컴포넌트 내부는 간단히 이렇게 되어 있다. CoreUI에서 제공해주는 컴포넌트들에는 C가 붙어있음.

const {content, size, total} = data;
const itemList = customCellItem
  ? getCustomRow(content, customCellItem)
  : content;

return (
  <>
    <CTable hover striped responsive>
      <CTableHead>
        <CTableRow>
          {column.map(c => (
            <CTableHeaderCell scope='col' key={c.key} style={c._style}>
              {c.label}
            </CTableHeaderCell>
          ))}
        </CTableRow>
      </CTableHead>
      <CTableBody>
        {itemList.map((item, idx) => (
          <CTableRow
            key={`${item.id}-${idx}`}
            onDoubleClick={() => onRowClick?.(item)}
          >
            {Object.keys(filterRowData(item, column)).map(cell => (
              <CTableDataCell key={cell}>{item[cell]}</CTableDataCell>
            ))}
          </CTableRow>
        ))}
      </CTableBody>
    </CTable>
    <Pagination
      current={paginationState[0]}
      setCurrentPage={paginationState[1]}
      totalPage={Math.ceil(total / size)}
    />
  </>
);

props로 받은 column과 item을 테이블 row로 렌더링시킨다. getCustomRow 함수를 통해 각 cell마다 렌더링할 컴포넌트를 직접 지정해주고, filterRowData 함수를 통해 서버에서 response로 받은 data 객체를 column 객체와 대조해 보여주고 싶은 키-값만 필터링한다.

 

---

 

tsx에서 함수에 제네릭 사용하기

테이블 각 행을 클릭했을 때 실행되는 콜백 함수에, 인자로 각 행의 data가 전달되도록 했다.

문제는 여기서 발생할 수 있다.

 

컴포넌트 외부에서 data가 어떤 타입인지 모르기 때문에, 멍청한 개발자가 충분히 실수할 수 있는 상황이 만들어진다. 타입스크립트와 제네릭 타입을 통해 Table 컴포넌트로 넘긴 타입의 콜백에서 추론되어 적절한 타입을 얻을 수 있다.

 

const GenericReturnFunc = <T>(arg: T): T => {
  return arg;

그냥 ts 파일에서는 위와 같이 제네릭 함수를 쓸 수 있다. 하지만 tsx에서 위와 같이 작성하면 빨간줄이 뜨는 걸 볼 수 있다.

const GenericReturnFunc = <T extends {}>(arg: T): T => {
  return arg;
}

이렇게 extend 키워드를 사용하거나,

const GenericReturnFunc = <T,>(arg: T) : T => {
  return arg;
}

두개 이상의 타입 매개변수를 사용하면 정상적으로 제네릭을 인식한다. 라이브러리 타입 파일에서 위와 같이 쉼표를 쓴 제네릭 타입들을 자주 봐왔는데, 드디어 왜 그렇게 쓰는지 알았다!

 

---

컴포넌트에 제네릭 사용하기

const Table = <T extends Item>({
  column,
  data,
  customCellItem,
  paginationState,
  onRowClick,
}: TableProps<T>) => {
  const {content, size, total} = data;
  const itemList = customCellItem
    ? getCustomRow(content, customCellItem)
    : content;

  return (
    <>
    // ...

위와 같이 컴포넌트 함수에 제네릭 타입을 작성해주었다.
, 가 아닌 extends를 통해 Item 이라는 타입을 확장하고 있다.

 

export type Item = {
    [key: string]: number | string | any;
    _props?: CTableRowProps;
};

Item은 테이블 컴포넌트 라이브러리에 내장된 타입이다.
string을 key로 갖는 (굉장히 느슨한) 객체의 타입이다.

 

{
  itemList.map((item, idx) => (
    <CTableRow
      key={`${item.id}-${idx}`}
      onDoubleClick={() => onRowClick?.(item)}
    >
      {Object.keys(filterRowData(item, column)).map(cell => (
        <CTableDataCell key={cell}>{item[cell]}</CTableDataCell>
      ))}
    </CTableRow>
  ));
}

이런 식으로 키[값]을 사용하고 있기 때문에, Item 타입을 확장해 사용하는 것. 그렇지 않다면 item에서 id 속성을 가져오는 과정에서 'T' 형식에 'id' 속성이 없습니다.ts(2339) 오류를 마주치게 된다.

 

 

글을 쓰다 발견했는데, 타입스크립트 어쩌면 꽤나 친절할수도.

 

 

export interface CustomCellItem<T> {
  [key: string]: (data: T) => ReactNode;
}

export interface TableProps<T> {
  column: Column[];
  data: TableResponse<T>;
  customCellItem?: CustomCellItem<T>;
  paginationState: [number, Dispatch<SetStateAction<number>>];
  onRowClick?: (data: T) => void;
}

이제 컴포넌트의 인터페이스에 제네릭 타입을 넘겨줄 수 있다. 단순히 키-값 형태의 객체라는 의미를 담은 Item 타입이 아닌 정확한 data의 타입을 넘겨 사용할 수 있게 되었다.

 

---

 

멋진 테이블 컴포넌트 만들기

 

/**
 * 패칭 데이터 중 table column에 있는 값만 반환
 * @param data 원본 데이터 (패칭한 데이터)
 * @param column table에서 보여줄 column key
 */
const filterRowData = <T extends Item>(
  data: T,
  column: Column[],
): Partial<T> => {
  const map = new Map();
  column.forEach(c => {
    const key = c.key;
    map.set(key, data[key]);
  });
  return Object.fromEntries(map);
};

data의 여러 속성 중 column에 있는 속성만 남긴다. Partial<T> 유틸리티 타입을 통해 반환값을 명시해주었다. 명시하지 않으면 타입이 추론되지 않아 any로 나타난다.

 

 

export interface CustomCellItem<T> {
  [key: string]: (data: T) => ReactNode;
}

/**
 * 버튼, input 등의 렌더링할 컴포넌트를 item으로 반환
 * @param data 렌더링할 data
 * @param customCellItem cell에 렌더링할 컴포넌트
 */
const getCustomRow = <T,>(data: T[], customCellItem: CustomCellItem<T>) => {
  let customRow = data;
  Object.keys(customCellItem).forEach(v => {
    customRow = customRow.map(row => {
      return {...row, [v]: customCellItem[v](row)};
    });
  });
  return customRow;
};

customCellItem을 위한 getCustomRow 함수이다. 인자로 받은 객체에 있는 속성과 같은 키를 가진 컬럼은 컴포넌트를 반환하는 함수로 대체된다.

 

아주 멋지게 타입이 추론되는 것을 볼 수 있다.