TypeScript

React에서 TypeScript 사용하기

React 프로젝트를 TypeScript로 시작하려면, create-react-app 명령어에 --template typescript 옵션을 추가하여 실행하면 된다. 이 명령은 TypeScript 설정이 포함된 React 프로젝트를 생성한다.
npx create-react-app my-app --template typescript
이 명령어를 실행하면, tsconfig.json 파일이 포함된 TypeScript 프로젝트가 생성되며, .tsx 확장자를 가진 TypeScript 파일에서 React 컴포넌트를 작성할 수 있다.

객체 타입 정의하기

type 키워드를 사용해 객체의 모양을 정의할 수 있다. 객체 내부 속성의 타입도 정의할 수 있다.
type Restaurant = {
  name: string;
  category: string;
  address: {
    city: string;
    detail: string;
  }
  menu: {
    name: string;
    price: number;
    category: string;
  }[]
}

TypeScript 컴포넌트화

React 컴포넌트에서 props의 타입을 지정하려면 React.FC에 제네릭으로 props 타입을 지정하고, interface로 props 타입을 정의하면 된다.
const App: React.FC<Props> = ({ info }) => {
  return <div>{info.name}</div>
}

interface Props {
  info: Restaurant
}

제네릭을 사용한 타입 정의

API 응답과 같이 타입이 동적일 경우 제네릭을 사용하여 유연하게 타입을 정의할 수 있다.
interface ApiResponse<T> {
  data: T;
  total: number;
  page: number;
}

type Restaurant = {
  name: string;
  address: string;
}

const response: ApiResponse<Restaurant> = {
  data: { name: 'My Restaurant', address: '123 Main St' },
  total: 1,
  page: 1
};

타입 확장하기 - 조건부 타입과 유틸리티 타입

TypeScript는 조건부 타입 및 여러 유틸리티 타입(Partial, Readonly, Pick, Omit 등)을 제공하여 타입을 더욱 강력하고 유연하게 만들어 준다.
  • extends 키워드로 인터페이스를 확장할 수 있다.
  • Omit 유틸리티 타입으로 특정 프로퍼티를 제거한 타입을 만들 수 있다.
  • Pick 유틸리티 타입으로 특정 프로퍼티만 추출한 타입을 만들 수 있다.
interface User {
  id: number;
  name: string;
  email: string;
}

// 'email' 필드를 제외한 타입 정의
type UserWithoutEmail = Omit<User, 'email'>;

// 모든 필드를 선택적으로 만드는 타입 정의
type PartialUser = Partial<User>;
이렇게 하면 TypeScript의 다양한 기능을 통해 React 프로젝트에서 안전하고 효율적인 코드를 작성할 수 있다. TypeScript는 특히 대규모 프로젝트나 복잡한 상태 관리가 필요한 프로젝트에서 그 진가를 발휘한다.