타입스크립트의 제네릭 기능과 실전 적용

타입스크립트의 제네릭 기능과 실전 적용

타입스크립트에서 제네릭(Generic) 기능은 다양한 타입에 대해 작동하는 재사용 가능한 코드를 작성할 수 있게 도와줍니다. 제네릭은 함수, 클래스, 인터페이스, 타입 등에서 특정 타입이 아닌 다양한 타입을 수용할 수 있도록 해줍니다. 이를 통해 코드의 유연성과 타입 안전성을 동시에 확보할 수 있으며, 복잡한 타입 구조를 처리할 때 강력한 도구로 활용됩니다. 실제 프로젝트에서 제네릭은 매우 유용한 방식으로 여러 곳에 적용될 수 있습니다.

 

1. 재사용 가능한 함수 작성

제네릭 함수는 다양한 타입을 처리할 수 있는 범용적인 함수를 작성할 때 사용됩니다. 이를 통해 같은 로직으로 다양한 타입의 데이터를 처리할 수 있습니다. 아래는 제네릭을 사용한 간단한 함수 예시입니다.

function getFirstItem<T>(items: T[]): T {
  return items[0];
}

const numbers = getFirstItem([1, 2, 3]); // number 타입
const strings = getFirstItem(["a", "b", "c"]); // string 타입

위 예시에서 T는 타입 매개변수로, 이 함수는 숫자 배열이나 문자열 배열 등 다양한 타입의 배열을 받아서 첫 번째 요소를 반환할 수 있습니다. 반환 타입도 입력받은 타입에 따라 자동으로 결정됩니다.

 

2. 컴포넌트와 훅의 유연성 향상 (React 예시)

React와 같은 프레임워크에서 제네릭은 재사용 가능한 컴포넌트나 훅을 작성할 때 유용하게 사용됩니다. 제네릭을 사용하면 다양한 데이터 타입을 처리할 수 있는 유연한 컴포넌트를 만들 수 있습니다.

function useApi<T>(url: string): { data: T | null, loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

const { data, loading } = useApi<User>("/api/user");

위 코드에서 useApi는 제네릭을 사용해 호출할 때마다 데이터 타입을 지정할 수 있습니다. 이 예시는 API로부터 데이터를 불러올 때 유용하며, 타입 안전성을 유지하면서도 여러 타입의 데이터를 처리할 수 있는 범용 훅을 만들 수 있습니다.

 

반응형

 

3. 타입 안전한 데이터 구조 구현

제네릭은 데이터 구조에서도 유용하게 사용됩니다. 예를 들어, 큐(Queue)와 같은 데이터 구조를 제네릭을 활용하여 다양한 타입을 수용할 수 있게 만들 수 있습니다.

class Queue<T> {
  private data: T[] = [];

  push(item: T) {
    this.data.push(item);
  }

  pop(): T | undefined {
    return this.data.shift();
  }
}

const numberQueue = new Queue<number>();
numberQueue.push(10);

const stringQueue = new Queue<string>();
stringQueue.push("Hello");

위 코드에서 Queue 클래스는 숫자, 문자열 등 어떤 타입의 데이터도 처리할 수 있으며, 타입 안전성을 보장합니다. 제네릭을 사용함으로써 중복된 코드를 줄이고, 재사용 가능한 구조를 만들 수 있습니다.

 

728x90

 

4. API 응답 처리

API 호출에서 받은 응답 데이터를 처리할 때도 제네릭을 사용해 타입 안전성을 높일 수 있습니다. 응답 데이터의 타입을 미리 정의하면, 데이터 처리 시 발생할 수 있는 오류를 미리 방지할 수 있습니다.

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  const data = await response.json();
  return data as T;
}

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

const user = await fetchData<User>("/api/user");
console.log(user.name); // 타입 안전하게 사용 가능

이 예시는 API에서 User 타입의 데이터를 받아오는 경우를 보여줍니다. 제네릭을 사용하면 API 응답 데이터의 타입을 명확히 정의할 수 있고, 이를 통해 데이터 처리 시 타입 안전성을 유지할 수 있습니다.

 

5. 유틸리티 타입 구현

타입스크립트에서는 제네릭을 사용하여 유틸리티 타입을 정의할 수 있습니다. 이를 통해 코드를 더욱 효율적이고 재사용 가능하게 만들 수 있습니다. 예를 들어, Nullable 타입을 만들어 특정 값이 null이 될 수 있음을 나타낼 수 있습니다.

type Nullable<T> = T | null;

function safeParse<T>(json: string): Nullable<T> {
  try {
    return JSON.parse(json) as T;
  } catch {
    return null;
  }
}

const data = safeParse<{ name: string }>(jsonString);

Nullable<T> 타입은 주어진 타입 T가 null일 수 있음을 명시하며, 데이터가 유효하지 않은 경우를 처리할 때 유용합니다.

 

결론

타입스크립트의 제네릭 기능은 코드의 재사용성을 극대화하고, 타입 안전성을 유지하며 다양한 상황에서 유연하게 적용될 수 있습니다. 제네릭을 사용하면 동일한 로직으로 다양한 타입의 데이터를 처리할 수 있으며, 이는 React 컴포넌트나 데이터 구조, API 응답 처리와 같은 여러 프로젝트에서 중요한 역할을 합니다. 제네릭을 적절히 활용하면 코드의 가독성, 유지보수성, 안정성을 모두 높일 수 있습니다.