React를 사용한 TypeScript 단계별 통합 가이드

TypeScript를 React와 통합하면 정적 유형 검사와 더 나은 툴링 지원을 제공하여 개발 경험이 향상됩니다. 이 가이드는 React 프로젝트에서 TypeScript를 처음부터 설정하는 과정을 안내합니다.

필수 조건

Node.js와 npm(노드 패키지 관리자)이 시스템에 설치되어 있는지 확인하세요. 이러한 도구는 프로젝트 종속성과 스크립트를 관리하는 데 필요합니다.

TypeScript로 새로운 React 프로젝트 만들기

TypeScript로 새 React 프로젝트를 시작하는 가장 쉬운 방법은 Create React App with TypeScript 템플릿을 사용하는 것입니다. 다음 단계를 따르세요.

1. 새 프로젝트 만들기: Create React App을 사용하면 TypeScript를 지원하는 새로운 React 프로젝트를 생성할 수 있습니다.

npx create-react-app my-app --template typescript

이 명령은 TypeScript 구성을 바로 사용하여 my-app이라는 이름의 새로운 React 프로젝트를 설정합니다.

TypeScript 구성 이해

생성된 프로젝트에는 TypeScript 컴파일러 옵션과 프로젝트 설정이 포함된 tsconfig.json 파일이 포함됩니다. 샘플 구성은 다음과 같습니다.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

TypeScript 구성 요소 작성

React 구성 요소는 TypeScript를 사용하여 작성하여 유형 안전성을 보장할 수 있습니다. 다음은 TypeScript를 사용한 함수형 구성 요소의 예입니다.

import React from 'react';

interface Props {
  name: string;
  age?: number;
}

const Greeting: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
}

export default Greeting;

이 예에서 Props 인터페이스는 구성 요소의 props에 대한 유형을 정의합니다. React.FC 유형은 자식 및 유형 검사가 있는 함수형 구성 요소에 사용됩니다.

프로젝트 실행

TypeScript를 설정하고 구성 요소를 작성한 후 다음 npm 스크립트를 사용하여 프로젝트를 실행할 수 있습니다.

npm start

이 명령은 개발 서버를 시작하고 기본 웹 브라우저에서 React 애플리케이션을 엽니다.

추가 팁

• 유형 정의: 타사 라이브러리의 경우 npm을 사용하여 유형 정의를 설치합니다. 예를 들어, npm install @types/react @types/react-dom --save-dev은 React 및 ReactDOM에 대한 유형을 제공합니다.
• Redux와 함께 TypeScript 사용하기: Redux를 TypeScript와 함께 사용하는 경우 더 나은 유형 안전성과 자동 완성을 위해 액션, 리듀서 및 저장소를 입력하세요.

결론

TypeScript를 React와 통합하면 유형 안전성과 더 나은 코드 유지 관리성을 제공하여 개발이 향상됩니다. 이 가이드에 설명된 단계를 따르면 TypeScript가 포함된 React 프로젝트를 효과적으로 설정할 수 있으며, 개발자는 TypeScript의 기능을 활용하여 견고하고 확장 가능한 애플리케이션을 빌드할 수 있습니다.