함수형 컴포넌트에서 제네릭 사용하기

MUI의 DataGrid 컴포넌트를 사용하면서 기본 설정값들을 매번 써주는게 귀찮아졌다.

한번 감싸서 BaseItem만 받을 수있는 그리드 컴포넌트를 만들기로 했다.

 

클래스 구조에서는 제네릭을 사용해봤는데 함수형에서는 제네릭을 처음 사용해서 조사해봄

 

1. 일단 props에 제네릭을 적는다.

• DataGridProps 라고 이름짓고 제네릭을 적용한다.

export interface DataGridProps<ItemType extends BaseItem> {
  rows: ItemType[];
  setRows: React.Dispatch<React.SetStateAction<ItemType[]>>;
}

2. 컴포넌트에 제네릭을 적고 props와 연결한다.

• MyDataGrid 컴포넌트는 제네릭 컴포넌트가 됐다.
• MyDataGrid는 BaseItem을 상속하는 데이터만 받을 수 있다.
• MyDataGrid에서 전달한 제네릭 값이 Props에 전달된다.

function MyDataGrid<ItemType extends BaseItem>(props: DataGridProps<ItemType>) {
	...
}

 

https://wanago.io/2020/03/09/functional-react-components-with-generic-props-in-typescript/

Functional React components with generic props in TypeScript