Generic은

재 사용성이 높은 컴포넌트를 만들 때 자주 활용한다.
타입을 규정해야하는 타입스크립트의 특성상, 여러가지 타입에서 동작하는 컴포넌트를 만들 때 주로 사용한다.
제네릭이란 타입을 함수의 파라미터처럼 사용하는 것.

function getSizeNum(arr:number[]):number {
	return arr.length
}

const nums = [1,2,3]
getSizeNum(num) // 3

const strs = ['a','b','c']
getSizeNum(str) // type error

이러한 방식으로 작성하면 된다.
그런데 만약 배열안에 들어올 수 있는 인자가 점점 늘어나는 경우에는 어떻게 해야 할까?

하드코딩한 예를 보자.

function getSizeNum(arr:number[]| string[]) {
	return arr.length
}

const nums = [1,2,3]
getSizeNum(num) // 3

const str = ['a','b','c']
getSizeNum(str) // 3

이런식으로 유니온 타입으로 규정을 하면 되겠지만 , 끝이 없이 늘어난다면?
계속해서 하드코딩을 할 수는 없다.
이 때!! 사용하는 것이 바로 Generic이다.

제네릭 예제

function getSizeNum<T>(arr:T[]) {
	return arr.length
}

const nums = [1,2,3]
getSizeNum<number>(nums) // 3

const strs = ['a','b','c']
getSizeNum<string>(strs) // 3

const bools = [true, false, true]
getSizeNum<boolean>(bools) // 3

이렇게 파라미터처럼 규정해 놓고 사용할 수 있다.
처음 함수를 실행하는 곳에서 타입을 규정하고 던지는 방식으로 사용하면 된다.