React 컴포넌트에 Props에 제네릭 타입 적용

nearworld·2023년 5월 24일
0

리액트 기초

목록 보기
8/12
post-custom-banner

제네릭 컴포넌트 선언

type ListType = Array<Vehicle | Animal>;

type Props<T> = {
  list: T;
};

const List = <T extends ListType>({list}: Props<T>) => {
  return (<FlatList renderItem={(index, item) => (
    <View key={index}>
      {children}
    </View>)} />);
};

사용

export type Vehicle = {
  maxSpeed: 400;
  minSpeed: 0;
  color: string;
  maker: string;
}
export type Animal = {
  type: 'reptile' | 'primate' | 'birds';
  life: number;
}

const dataList: Vehicle[] = {
  ...
};

const App = () => {
  return (
    <View>
      <List list={dataList} />
    </View>
  );
};
profile
깃허브: https://github.com/nearworld
post-custom-banner

0개의 댓글