<aside> 💡 목차

</aside>

1. 제네릭 정의

• 재사용 가능한 컴포넌트(코드 단위)를 만드는데 사용
• 컴포넌트가 처리할 데이터 타입을 미리 지정하지 않고
• 해당 컴포넌트를 사용하는 시점에서 원하는 데이터 타입 지정 가능

2. 제네릭의 필요성

• 코드 중복을 줄임, 재사용 가능한 컴포넌트 생성
• 다양한 타입을 처리하는 함수나 클래스 생성 가능
• 타입 안정성 보장
  • '컴파일' 시점에 타입을 체크
  • '런타임'에서 발생할 수 있는 에러를 방지

컴파일(Compile)

• 소스코드를 작성하고 편집하는 과정

런타임(Runtime)

• 컴파일 과정을 마친 프로그램이 사용자에 의해 실행되어 동작되어지는 때

3. 제네릭 기본 문법

• 사용할 컴포넌트(변수, 함수, 클래스 등)의 이름뒤에 꺽쇠괄호(<>) 안에 타입 변수를 넣는 것
• 함수나 클래스 등에서 사용할 타입을 명시
• 임의의 키워드를 사용하여 명시, 일반적으로 대문자 알파벳 하나를 사용 (T: Type)
• 해당 타입 변수는 컴포넌트 내에서 실제 데이터 타입의 자리를 대신

function generic<T>(arg: T): T {
  // T(Type)는 타입 변수 (단일 타입 변수)
  // : 해당 타입 변수는 입력 인수의 타입을 T로 지정
  // , 함수의 반환 타입을 T로 지정
  return arg;
}

let stringOutput = generic<string>('안녕하세요');
// let stringOutput = generic('안녕하세요'); // <string>은 생략 가능

let stringOutput2 = generic<string>(500); // Error
// 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.

let numberOutput = generic<number>(500);
// let numberOutput = generic<number>(500); // <number>는 생략 가능

let numberOutput2 = generic<number>('반갑습니다'); // Error
// 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다.

console.log(stringOutput); // 안녕하세요
console.log(numberOutput); // 500