[TypeScript] 제네릭 컴포넌트 (generic component) 정의 및 사용방법

이 글은 원글을 참고하여 정리한 내용입니다. 

 

Definition

TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다.

 

Example

# Props

interface Props<T> {
    renderItem: (item: T) => React.ReactNode;
    keyExtractor: (item: T) => string;
    data: T[];
}

• data: 제네릭 타입 T를 받을 배열 요소
• renderItem: 타입 T의 react 요소를 반환하는 함수
• keyExtractor: 키를 추출하는 함수

 

# Component 정의

const GenericList = <T extends unknown>({
  data,
  renderItem,
  keyExtractor
}): Props<T>) => {
  return (
    <div>
      {data.map((item) => (
        <div key={keyExtractor(item)} className="item">
          {renderItem(item)}
        </div>
      ))}
    </div>
  );
};

export default GenericList;

GenericList 컴포넌트는 전달되는 데이터로부터 type을 추출합니다. renderItem은 전달된 데이터 type에 의존하기 때문에 자동적으로 도움이 됩니다. 

 

Conclusion

Generic components를 사용하면 유지보수, refactorable한 코드를 작성하는데 도움이 됩니다. 

 

---

https://medium.com/edonec/creating-a-generic-component-with-react-typescript-2c17f8c4386e