제네릭(Generic)

• TypeScript에서 제네릭 형식의 <...> 안에 들어가는 타입은 각 객체(클래스, 함수, 인터페이스 등)가 미리 정의한 규칙에 따라 그 역할이 정해진다. 사용자는 제네릭을 통해 해당 객체가 요구하는 타입 정보를 제공하고, 이를 통해 타입 안전성을 강화할 수 있다.

1. Array

• 제네릭 역할: 배열의 구성 요소의 타입을 정의.

• 예시: Array<string>

  • <string>은 배열이 문자열 타입의 값을 포함한다는 의미.

  const names: Array<string> = ["Alice", "Bob"];
  const names: string[]  = ["Alice", "Bob"]; // 같은 의미임

2. Promise

• 제네릭 역할: 비동기 작업이 resolve될 때 반환할 값의 타입을 정의.

• 예시: Promise<number>

  • <number>는 비동기 작업이 숫자 값을 반환할 것을 의미.

  const fetchNumber: Promise<number> = new Promise((resolve) => resolve(42));

3. 리액트 함수형 컴포넌트 (React.FC)

• 제네릭 역할: 리액트 컴포넌트가 받을 props의 타입을 정의.

• 예시: React.FC<Props>

  • <Props>는 컴포넌트가 특정 타입의 props를 받아 처리할 것을 의미.

  interface ButtonProps {
    label: string;
    onClick: () => void;
  }
  
  const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
    return <button onClick={onClick}>{label}</button>;
  };
  

객체에 해당하는 제네릭에 대한 이해가 사전에 필요하다.

1. 제네릭의 역할 이해
   • 각 객체마다 제네릭의 역할이 다릅니다. 예를 들어, Array<T>는 배열의 요소 타입을 나타내고, Promise<T>는 비동기 작업의 결과 타입을 나타냅니다. 이 차이를 알고 있어야 제네릭을 올바르게 사용할 수 있습니다.
2. 타입 안전성
   • 제네릭을 올바르게 사용하면, 타입스크립트가 타입 안전성을 보장해 줍니다. 미리 정의된 규칙을 알면 코드에서 발생할 수 있는 타입 관련 오류를 방지할 수 있습니다.
3. 라이브러리 및 API 사용
   • 많은 라이브러리와 API에서 제네릭을 사용하여 타입을 정의하고 있으므로, 이를 이해하면 더 효율적으로 라이브러리를 사용할 수 있습니다.

결론

• 각 객체에서 제네릭의 역할은 미리 정의된 규칙에 따라 특정 타입 정보를 전달받아 처리하는 방식으로 작동한다. Array, Promise, React.FC 등은 각자의 제네릭 규칙을 통해 사용자에게 필요한 타입 정보를 요구하며, 이를 통해 코드의 안전성과 유연성을 보장한다.