타입스크립트와 리액트의 고급 타입 활용법

byCode Keeper •



타입스크립트와 리액트의 고급 타입 활용법


타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋으로 정적 타입을 지원하여 코드의 안정성과 유지보수성을 높입니다. 리액트(React)와 함께 사용하면 더욱 강력한 애플리케이션을 개발할 수 있습니다. 이번 포스팅에서는 타입스크립트와 리액트에서 고급 타입을 사용하는 방법을 소개하고, 이를 통해 애플리케이션의 가독성과 안정성을 높이는 방법을 살펴보겠습니다.


고급 타입의 중요성


타입스크립트의 고급 타입을 사용하면 코드의 재사용성을 높이고, 복잡한 타입 구조를 명확하게 정의할 수 있습니다. 이를 통해 팀 간 협업이 원활해지고, 코드의 유지보수성이 크게 향상됩니다.


제네릭 타입


제네릭 타입은 타입을 매개변수로 받아 다양한 타입에 대해 동작하는 함수나 클래스를 정의할 수 있게 합니다.


제네릭 함수


제네릭 함수를 사용하면 다양한 타입을 처리할 수 있는 유연한 함수를 작성할 수 있습니다.


function identity<T>(arg: T): T {
  return arg;
}

const num = identity<number>(5);
const str = identity<string>('hello');

위 예제에서 identity 함수는 T라는 제네릭 타입을 받아, 어떤 타입이든 동일한 타입을 반환합니다.


제네릭 컴포넌트


리액트 컴포넌트에서도 제네릭을 사용할 수 있습니다.


import React from 'react';

interface Props<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: Props<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

export default List;

위 예제에서 List 컴포넌트는 T라는 제네릭 타입을 받아 다양한 타입의 리스트를 렌더링할 수 있습니다.


유틸리티 타입


타입스크립트는 여러 유틸리티 타입을 제공하여 타입 변환을 쉽게 할 수 있습니다.


Partial


Partial 타입은 모든 프로퍼티를 선택적으로 만듭니다.


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

function updateUser(user: User, updates: Partial<User>): User {
  return { ...user, ...updates };
}

const user: User = { id: 1, name: 'John Doe', age: 25 };
const updatedUser = updateUser(user, { name: 'Jane Doe' });

Pick


Pick 타입은 특정 프로퍼티만 선택하여 타입을 구성합니다.


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

type UserName = Pick<User, 'name'>;

const userName: UserName = { name: 'John Doe' };

Omit


Omit 타입은 특정 프로퍼티를 제외하여 타입을 구성합니다.


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

type UserWithoutId = Omit<User, 'id'>;

const userWithoutId: UserWithoutId = { name: 'John Doe', age: 25 };

조건부 타입


조건부 타입은 타입스크립트에서 타입을 동적으로 결정할 수 있게 합니다.


type IsString<T> = T extends string ? 'yes' : 'no';

type A = IsString<string>; // 'yes'
type B = IsString<number>; // 'no'

조건부 타입은 복잡한 타입 정의를 간결하게 만들 수 있습니다.


인터섹션 타입


인터섹션 타입은 여러 타입을 결합하여 새로운 타입을 만들 수 있습니다.


interface Name {
  name: string;
}

interface Age {
  age: number;
}

type Person = Name & Age;

const person: Person = { name: 'John Doe', age: 25 };

인터섹션 타입은 객체의 조합을 명확하게 정의할 때 유용합니다.


유니언 타입


유니언 타입은 여러 타입 중 하나를 가질 수 있습니다.


function format(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value.toFixed(2);
}

const formattedString = format('hello'); // 'HELLO'
const formattedNumber = format(123.456); // '123.46'

유니언 타입은 다양한 입력을 처리하는 함수에서 유용합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 타입스크립트와 리액트에서 고급 타입을 사용하는 방법에 대해 살펴보았습니다. 제네릭 타입, 유틸리티 타입, 조건부 타입, 인터섹션 타입, 유니언 타입을 활용하면 코드의 재사용성과 가독성을 높일 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전