React & Typescript (with. CRA) 생성방법

CRA (Create-React-App)을 이용해 TypeScript를 사용하는 React 프로젝트 생성 방법에 대해 알아보려 한다.

여러 가지 검색을 해본 결과 React를 Typescript 형태로 생성하는 여러 가지 생성법이 존재하는데 한번 정리해보고 각 생성 방법의 차이 점에 대해서도 확인해보려 한다.

 

1. CRA(Create-react-app.dev) 사이트의 Adding Typescript 이용

• Typescript 사이트에서도 해당 사이트를 공식문서로 제공하는 듯하다.
• 참고로 해당 기능은 react-scripts@2.1.0 이상에서만 사용 가능하다고 한다.

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

# or

yarn create react-app my-app --template typescript

CRA를 통한 React(TSX) App

 

해당 방식대로 프로젝트를 생성을 하면 기존 JSX를 이용하는 CRA와 동일한 형태의 기본적인 항목들 이외에 Typescript항목이 포함된 Typescript React 앱이 생성된 것을 확인할 수 있다.

package.json에 기본적인 의존성 library도 추가되어 생성된다. (2021.06.29일 버전)

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  }

 

2.  --typescript를 이용하는 방법 

• 해당 방법은 검색해본 결과 적용법으로 알려져 있지만 실제적으로 적용이 되지 않는 것으로 확인.
• 예전 버전에서 해당 옵션을 통해 생성이 되었던 적이 있었는지 까지는 정확하지 않지만 현재 적용이 안 되는 옵션임.

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

# or with yarn

yarn create react-app my-app --typescript

위 방법을 통해 React 프로젝트를 생성할 경우 실제적으로 JSX를 이용하는 CRA 생성과 동일하게 생성되는 것으로 확인.

npx create-react-app my-app

# or with yarn

yarn create react-app my-app

CRA를 통한 React(JSX) App

 

해당 항목으로 생성을 할경우 기존 프로젝트에 Typescript 추가하는 의존성 모듈 패키지를 별도로 설치해야 함.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or with yarn

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

3.  react-scripts-ts를 이용하는 방법 (feat. DEPRECATED)

• Microsoft (TypeScript React Starter)  및 wmonk (create-react-app-typescript) 항목으로 생성

# Global create-react-app 모듈생성
npm install -g create-react-app

# create-react-app 모듈을 통한 React 프로젝트생서
create-react-app my-app --scripts-version=react-scripts-ts

npx create-react-app my-app --scripts-version=react-scripts-ts

# or with yarn

yarn create react-app my-app --scripts-version=react-scripts-ts

※ 생성 항목 역시 기본 모듈이에외 생성되지 않는다!

 

 

 

※ 해당 방법으로 제공되는 항목은 deprecated 되어 --template typescript를 사용하도록 유도하고 있다.

√ The react-scripts-ts package is deprecated. TypeScript is now supported natively in Create React App. You can use the --template typescript option instead when generating your app to include TypeScript support. Would you like to continue using react-scripts-ts? 

 

 

결론적으로 React Typescript프로젝트 생성시는 Adding Typescript 에서 제공하는 방식으로 이용하면된다.