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는 특히 대규모 프로젝트나 복잡한 상태 관리가 필요한 프로젝트에서 그 진가를 발휘한다.