제네릭 컴포넌트(generic component)

원글: Creating a generic component with React TypeScript.

 

* 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다.

 

 

정의

• 타입스크립트 제네릭은 재사용 가능한 컴포넌트를 생성하는 방법을 제공하는 툴이다.

 

사용하면 좋은 점

• 제네릭을 사용하면 하나의 데이터 타입이 아니라 다양한 타입의 데이터를 받을 수 있는 컴포넌트를 생성할 수 있으며, 개발자는 각자의 타입을 가지고 이러한 제네릭 컴포넌트를 사용할 수 있다. 제네릭은 프로그램의 유연성과 장기적인 확장 가능성을 지니고 있음을 보장한다.
• 제네릭 컴포넌트를 만들어 두면, 데이터를 표시할 때마다 매번 배열에 대한 map을 돌리는 작업을 하지 않아도 된다.

 

예제

1. 먼저, 대상 컴포넌트가 props로 받을 것들에 대해 정의해보자.

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

• data는 제네릭 타입 T를 받을 배열이다.
• renderItem은 타입 T의 리액트 요소를 반환하는 함수다.
• keyExtractor은 키를 추출할 함수다.

 

2. 이제 컴포넌트를 정의해보자.

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;

GenericeList 컴포넌트는 전달 받은 data prop으로부터 타입을 추출해낸다. 그리고 renderItem은 전달 받은 data의 타입에 의존하기 때문에 역시 자동적으로 typing이 될 것이다.

 

3. 이렇게 정의한 제네릭 컴포넌트는 다음과 같이 사용하면 된다.

export default () => {
  return (
    <div className="App">
      <GenericList
        keyExtractor={({ id }) => id}
          data={[
            { id: '1', firstName: 'John', lastName: 'Doe' },
            { id: '2', firstName: 'Jane', lastName: 'Doe' },
            { id: '3', firstName: 'Gildong', lastName: 'Hong' },
          ]}
        renderItem={(item) => <p>{item.firstName}</p>}
      />
    </div>
  );
};

앞서 말했던 것과 같이, 여기서 map을 직접 돌리지 않아도 데이터를 표시할 수 있게 되었다.

 

결론

제네릭 컴포넌트를 사용함으로써 더 짧고 유지보수가 용이한 코드를 작성할 수 있다.