제네릭 컴포넌트를 사용해보았다

프로젝트에서 antd를 사용해 아래와 같은 테이블을 만들었었는데

문제는 점점 수정되는 곳이 많아져 버렸다. 그러다보니 이대로 가면 점점 더 커스텀하기가 힘들겠다라는 생각이 들었고 직접 만들었다.

해당 프로젝트에 Table컴포넌트 하나만 사용할때는 문제가 전혀 없어보였지만, 여러개를 사용해야한다면? 이라는 생각이 들었고 그렇게 생각해보니 재사용성에서 문제가 있었다.

재사용성에서 문제가 생긴 이유는, 프로젝트에서 하나의 Table컴포넌트만 있다면, 알맞게 type을 지정을 해주면 되는 것인데 여러개가 된다면 Table컴포넌트를 또 선언하는 것이 아닌 파일 자체를 다시 만들어서 사용을 해야하는 것이었다.

export default function Table({data}:{data:DataType}){
	return <table></table>
}

그래서 생각난 것은 컴포넌트도 제네릭을 사용할 수 있지 않을까? 였고 방법을 찾아봤다.

export default function Table<T>({data}:{data:<T>}){
	return <table></table>
}

역시 가능했지만 문제는 저걸 어떻게 사용하는 것인가 였다. 방법은 아주 간단했다.

<<DataType>Table/> 

props에서 지정된 type을 통해 type을 전달해 주면 끝이었다.

아래는 내가 사용한 type이다.

interface Table<DataType {
	columns: TableColumns<DataType>;
}

type TableColumns<DataType> = TableColumnsItem<DataType>[];

interface TableColumnsItem<DataType> {
 title: StringNumber;
 dataIndex: keyof DataType;
}

그럼 이제 위 코드에서 어떤식으로 type이 전달되는 걸까?
아래는 실제 Table컴포넌트 사용코드 이다.

...생략 

 const columns: TableColumns<Ticket> = [
 {
   title: "제목",
   dataIndex: "title",
 },
 {
   title: "내용",
   dataIndex: "content",
 },
 {
   title: "날짜",
   dataIndex: "date",
 },
];

return <Table columns={columns}/>

전달과정은!

columns에서 사용된 제네릭 type이 부모요소로 타고 올라가서 적용이 된다.

이렇게 하면 Table컴포넌트 하나로 여러가지의 데이터를 type에 맞게 만들 수 있다.

제네릭이라는게 아직도 잘은 모르겠지만, 이렇게도 쓰인다는 잘 알게 된 것 같다. 이번에 제네릭을 하면서 Omit Pick 등 typescript의 다른 것들도 알게 되었는데 정리해보겠다!