최근 타입스크립트 사용중 제네릭을 사용할 일이 많아 제네릭에 대해 정확하게 알아보기로 했습니다.

 

### 🤔 제네릭(Generic)은 무엇인가..
일반적으로 타입스크립를 사용하여 변수에 데이터 타입을 정의하면 해당 타입 이외의 다른 타입의 데이터로는 변수에 값을 저장할 수 없습니다.
해당 방식은 데이터의 신뢰성을 높여주어 오류를 사전에 방지할 수 있지만 재사용할 수 있는 컴포넌트를 생성하는 것에 있어서는 불편함이 있습니다.

 
입력받은 데이터를 그대로 반환하는 loadData 함수로 예시를 들어보겠습니다.
아래의 소스코드에서는 UserData타입의 파라미터를 받아서 그대로 반환해주고있습니다.
 

```ts
interface UserData {
 name: string;
 age: number;
}

function loadData(data: UserData): UserData {
 return data
}

loadData({name: "찬영", age: 25})
```
 
그런데 여기서 UserData 타입이 아닌 PostData라는 타입의 파라미터를 사용하고 싶을 때는 어떻게 해야할까요?
머리속에 바로 떠오른 2가지 방법이 있습니다.
 

>any 타입 사용하기
```ts
function loadData(data: any): UserData {
 return data
}

loadData({name: "찬영", age: 25}) // userData
loadData({title: "포스트", content: "내용"}) // postData
```
any타입을 사용하면 어떤 타입의 데이터든 파라미터로 넘길 수 있기 때문에 문제가 발생하지 않습니다. 하지만 any타입을 사용하면 데이터 신뢰성, 효율성을 잃기 때문에 타입스크립트를 사용하는 이유가 없어집니다.
 
>두개의 함수 만들기
```ts
interface UserData {
 name: string;
 age: number;
}

function loadUserData(data: UserData): PostData {
 return data
}

loadUserData({name: "찬영", age: 25})

interface PostData {
 title: string;
 content: string;
}

function loadPostData(data: PostData ): PostData {
 return data
}

loadPostData({title: "포스트", content: "내용"})
```
loadData 함수를 userData를 불러오는 loadUser 함수, postData를 불러오는 loadPost 함수 두개로 나누어 주었습니다.
타입을 명확하게 정의하였기 때문에 신뢰성은 올랐지만 함수의 재사용성을 고려하지 않아 효율적이지 못한 방식입니다.
 
제네릭은 이러한 불편함을 없애기 위해 데이터 타입을 파라미터처럼 전달하여 사용할 수 있도록합니다.
 
>제네릭 사용하기
```ts
interface UserData {
 name: string;
 age: number;
}

interface PostData {
 title: string;
 content: string;
}

function loadData<Data>(data: Data): Data{
 return data
}

console.log(loadData<UserData>({name: 'chan', age: 25}))
console.log(loadData<PostData>({title: '포스트', content: '내용'}))
```

위 소스코드에서는 제네릭을 사용하여 타입을 전달하였습니다. (일반적으로 제네릭을 선언할 때는 \<T>를 사용하지만 쉽게 이해하기 위해 \<Data>로 선언했습니다.)
함수 선언, 사용부의 파라미터를 사용하는 () 앞부분에 <>를 사용하여 타입을 정의하면 해당 타입이 전달됩니다. 이렇게 동작하는 loadData 함수는 어떤 타입의 데이터가 들어올지 알고 있기 때문에 전혀 문제가 발생하지 않고 함수의 재사용성도 향상되었습니다.

 

***

 
### 👊 더 알아보기
제네릭을 사용한 데이터가 배열인 상황에는 파라미터의 타입을 지정하는 부분에 []를 사용하여 배열임을 정의해줍니다.
```ts
function loadData<Data>(data: Data[]): Data[] {
 return data
}
```

 
여러개의 제네릭을 전달 받아 사용할 수 있습니다.
```ts
function loadData<FirstData, SecondData>(firstData: FirstData, secondData: SecondData): {firstData:FirstData, secondData:SecondData} {
 return {firstData, secondData}
}

console.log(loadData<UserData, PostData>({name: 'chan', age: 25}, {title: '포스트', content: '내용'}))
```

최근 타입스크립트 사용중 제네릭을 사용할 일이 많아 제네릭에 대해 정확하게 알아보기로 했습니다.

 

### 🤔 제네릭(Generic)은 무엇인가..
일반적으로 타입스크립를 사용하여 변수에 데이

Typescript 제네릭(Generic) 이해하기