Frontend/Typescript

제네릭(Generics) 완벽 가이드: 유연하고 안전한 코드를 위한 마법 같은 도구

미니임 2026. 2. 19. 00:37

개발을 하다 보면 "다양한 타입을 수용하면서도, 타입의 안전성을 잃지 않는 방법은 없을까?"라는 고민에 빠지게 됩니다. 이때 우리를 구원해 줄 핵심 기술이 바로 **제네릭(Generics)**입니다.

오늘은 자바스크립트(TypeScript 기준)나 자바 등 현대 프로그래밍 언어에서 필수적인 제네릭의 개념부터 실무 예제까지 차근차근 알아보겠습니다.

1. 제네릭이란 무엇인가요?

제네릭을 한마디로 정의하자면 **"타입을 파라미터(매개변수)처럼 사용하는 것"**입니다.

함수를 호출할 때 값을 전달하듯이, 컴포넌트나 함수를 사용할 때 사용할 타입을 나중에 결정하는 방식이죠.

💡 비유로 이해하기: '라벨이 없는 상자'

우리가 이삿짐 상자를 만든다고 생각해 봅시다.

  • 일반적인 방식: "책 전용 상자", "옷 전용 상자"를 각각 따로 제작함 (비효율적)
  • any 방식: "아무거나 넣는 상자" (내용물을 꺼낼 때 무엇인지 몰라 위험함)
  • 제네릭 방식: "무엇이든 넣을 수 있는 빈 상자"를 만들고, 물건을 넣는 순간 "이 상자는 책 상자야"라고 라벨을 붙임 (유연하면서도 정확함)

2. 왜 제네릭을 써야 할까요?

① 재사용성 향상

하나의 함수나 클래스로 여러 타입에 대응할 수 있어 중복 코드를 줄여줍니다.

② 타입 안전성(Type Safety)

any 타입을 사용하면 컴파일 타임에 에러를 잡을 수 없지만, 제네릭은 어떤 타입이 들어오고 나가는지 명확히 추적합니다.

③ IDE의 자동 완성 지원

타입 정보가 유지되므로 개발 도구의 도움을 백분 활용할 수 있습니다.

3. 실전 예제로 배우는 제네릭

예제 1: 데이터를 그대로 반환하는 함수 (Identity Function)

가장 기초적인 형태입니다.

// 1. any를 사용하는 경우 (타입 정보를 잃어버림)
function identityAny(arg: any): any {
  return arg;
}
const result1 = identityAny("Hello"); // result1의 타입은 여전히 any

// 2. 제네릭을 사용하는 경우 (타입 정보가 유지됨)
function identity<T>(arg: T): T {
  return arg;
}

const result2 = identity<string>("Hello"); // 명시적 지정
const result3 = identity(123); // 타입 추론 (Type Inference)

예제 2: 여러 개의 타입을 사용하는 경우

제네릭은 한 번에 여러 개를 사용할 수도 있습니다. 보통 T, U, V 순으로 이름을 붙입니다.

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const myPair = pair<string, number>("Age", 30);
// myPair는 [string, number] 타입으로 정확히 정의됨

예제 3: 인터페이스와 결합한 실무 예제 (API 응답 처리)

백엔드 API 응답 구조는 보통 일정한 패턴이 있습니다. 이때 제네릭이 빛을 발합니다.

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User {
  id: number;
  name: string;
}

interface Post {
  id: number;
  title: string;
}

// 사용자 정보를 가져오는 응답
const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Alice" },
  status: 200,
  message: "Success"
};

// 게시글 정보를 가져오는 응답
const postResponse: ApiResponse<Post> = {
  data: { id: 101, title: "제네릭에 대하여" },
  status: 200,
  message: "Success"
};

4. 제네릭 제약 조건 (Generic Constraints)

"무엇이든" 들어올 수 있는 것이 제네릭의 장점이지만, 때로는 **"최소한 이것만은 가지고 있어야 해"**라고 제한해야 할 때가 있습니다. 이때 extends 키워드를 사용합니다.

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
  // T는 반드시 length 속성을 가진 타입이어야 함
  console.log(arg.length);
}

logLength("Hello");          // 성공 (string은 length가 있음)
logLength([1, 2, 3]);       // 성공 (array는 length가 있음)
// logLength(123);          // 오류 발생 (number는 length가 없음)

5. 마치며: 제네릭은 선택이 아닌 필수

제네릭은 처음 접하면 문법이 다소 낯설게 느껴질 수 있습니다. 하지만 **"타입을 변수처럼 넘긴다"**는 핵심 원리만 기억한다면, 훨씬 더 깔끔하고 견고한 코드를 작성할 수 있습니다.

특히 대규모 프로젝트나 라이브러리를 직접 설계할 때 제네릭은 필수적인 기술이므로, 오늘 배운 예제들을 직접 타이핑해 보며 익혀보시길 권장합니다!

📍 요약

  1. 제네릭은 타입을 파라미터화하여 재사용성을 높인다.
  2. any와 달리 타입 안전성을 완벽히 보장한다.
  3. <T>와 같은 기호를 사용하여 정의하며, 호출 시점에 타입이 결정된다.
반응형