CRA로 구축한 프로젝트에 TS 적용하기

이번 프로젝트에서 React + TS 를 쓰자고 했는데 초기세팅을 TS를 안넣고 CRA를 해버렸다 ㅜㅜ 그래서 다시 TS로 바꿔주는 작업을 해야했고 생각보다 간단하게 되어서 정리해보려고 한다.

 

방법 1 : CRA할 때 TS 설정하기

아직 CRA를 안했다면 아주 간단하게 TS로 시작할 수 있다. 물론 나는 CRA 이후에 TS로 바꿔주는 작업을 해야했지만 ㅜㅜ 아래 코드를 차례대로 실행하면 된다. 아래 코드를 실행 후 

// CRA 실행
$ npm install craete-react-app 

// TS로 초기세팅
$ npx create-react-app [프로젝트 폴더명] --template typescript
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

// 라이브러리 설치
$ npm i --save-dev @types/styled-components
$ npm install -D @types/react-router @types/react-router-dom

 

방법 2 : CRA로 되어있는 프로젝트에서 JS를 TS로 바꿔주기

만약 CRA로 이미 초기세팅이 되어있는 경우라면 이제부터 하나하나 시작해야한다. 대부분의 블로그에서 첫번째 코드가 없어서 한참 헤맸었다ㅜㅜ 밑의 내용을 차례대로 실행하면 tsconfig.json 파일이 생성되고 엄청난 에러들을 만날 수 있다.

// 프로젝트 폴더로 들어가서 타입스크립트 설치
$ npm i -g typescript

// 기존에 있던 패키지들을 타입스크립트도 되게끔 설치
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

// tsconfig.json 파일을 생성
$ tsc --init

 

tsconfig.json 파일 설정

{
  "compilerOptions": {
    "target": "es6", //어떤버전의 js로 컴파일할지 정의
    "lib": [
      //어떤 환경에서 사용하는지 정의(api자동완성 제공해줌)
      "dom", //브라우저
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src", // 추가된 것 ./src를 절대 경로로 지정
    "allowJs": true, //ts안에서 js허용(js파일 import가능)
    "skipLibCheck": true,
    "esModuleInterop": true,

    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    //컴파일할 폴더 입력. src의 모든파일 확인함
    "src"
  ],
  "exclude": ["node_modules"]
}

 

JS 파일들을 TS 파일로 변경

당연히 모든 파일들을 js에서 ts로 변경했고 라이브러리도 다 설치를 했는데 index.ts와 router.ts에서 문제가 생겼다.

'Routes'은(는) 값을 참조하지만, 여기서는 형식으로 사용되고 있습니다. 'typeof Routes'을(를) 사용하시겠습니까? ts(2749)

기존에 .js 확장자로 잘 되던 파일들이 .ts로 변경해도 적용이 안되는 이유를 찾아보니 확장자때문이라고 했다. 먼저 .js와 .jsx의 차이를 알아보았다. JSX는 JavaScript XML의 약자로, 자바스크립트에서 XML 추가한 확장형 문법이고 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 것이었다. .js와 .jsx의 기능적인 차이는 따로 없고 팀내 협의에 따라 정한다고 했는데 타입스크립트의 경우 TSX 문법을 쓰려면 무조건 .tsx 에서만 쓸 수 있다고 한다.

나는 index, router 파일에서 TSX 문법을 사용하고 있는데 확장자는 .ts로 되어있어서 생긴 오류였다. 확장자를 .tsx로 바꾸니 에러 없이 작동했다.

 

import React from 'react';

index, router 파일에서 아래 사진을 보면 다른 import 와는 다르게 React는 불이 안들어왔다.. npm start로 서버를 실행하면 또 작동이 잘 된다. 왜 사용을 안하고 있는데도 잘 작동할까 고민하며 이유를 찾아보았다.

결론부터 말하자면 리액트 버전 17부터 import React from 'react';는 생략 가능해졌다. import React from 'react';를 사용하는 이유는 브라우저가 읽을 수 있도록 JSX를 변환하기 위해 import 해오는 것인데 버전 17부터 리액트 내부에서 JSX 트랜스포머가 JSX를 변환하는 작업을 거치기때문에 모든 컴포넌트에서 생략 가능해졌다. 그래서 import를 지워도 서버가 잘 작동되는 것을 확인할 수 있다.

 

 

참고 자료

• 타입스크립트 초기 설정 (1)
• 타입스크립트 초기 설정 (2)
• ts와 tsx의 차이
• 타입스크립트 핸드북