기존 리액트 프로젝트에 TypeScript 적용하기

Today, What I learned?

기존 프로젝트에 타입스크립트 리팩토링을 시도하기 앞서, 혼자 했던 투두리스트 프로젝트를 타입스크립트로 리팩토링 해보기로 했다.

먼저 기존 프로젝트는 리덕스와 라우터를 이용해서 페이지 이동과 CRUD가 적용되어 있는 투두리스트였다.

기본 리덕스가 적용되어 있었기 때문에 먼저 redux-toolkit으로 리팩토링 해준 후 본격적인 타입스크립트 적용 시작!..

패키지 설치하기

먼저 타입스크립트와 관련된 패키지들을 설치해 주었다.

타입스크립트 공식문서에서 보고 패키지를 설치한 후에,

https://www.typescriptlang.org/download

How to set up TypeScript

@types 관련 패키지들을 설치해주었는데 이 프로젝트는  yarn 패키지로 만든 프로젝트라 아래와 같이 작성했다.

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

tsconfig.json 파일 설정하기

init으로 초기화 한 파일에서

$ tsc --init

두 가지 옵션 정도만 주석을 해제시켰다.

• noImplicitAny : any라는 타입이 의도치 않게 발생할 때 에러 띄움
• strictNullChecks : null, undefined 등 조작하면 에러 띄움

 

파일 수정

.js나 .jsx 파일을 .ts , .tsx 파일로 확장자를 바꿔주고 타입들을 넣어주면 되는데...

본격적인 에러의 시작..

 

 

🚧 TypeScript에서 styled-components 적용

처음부터 난항 발생!....

ts로 파일을 변환하니 styled-componets import 시 오류가 발생했는데 관련 패키지를 추가 설치해 주니 해결되었다.

yarn add --dev @types/styled-components

이런 식으로 패키지를 몇 개 추가해줘야 하는 일이 있었다.

 

 

🚧 tsconfig에 "jsx" 설정 추가

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

최상위 단에 react를 import 해주면 되는 에러라는데, tsconfig에 jsx 설정만 넣어줘도 해결할 수 있었다.

 

Are you rendering any jsx in the file? If so, you do need to import React, since those jsx tags compile into calls to React.createElement(). Without the import, the references to React are trying to reference a global variable, which then results in that error.

If you're using eslint, i'd recommend using eslint-plugin-react and turning on the rule react-in-jsx-scope, which will catch this case.

 

jsx에서 렌더링 할 때 React.createElement() 호출이 필요한데, import가 없다면 리액트는 전역변수에서 이 호출을 하려고 하기 때문에 에러가 발생한다는 내용 같다.

이 외에도 많은 에러가 날 반기고 있지만 차근차근 해결해나가 보도록 하자 😇..

 

 

참고글

https://itecnote.com/tecnote/javascript-react-typescript-react-refers-to-a-umd-global-but-the-current-file-is-a-module-consider-adding-an-import-instead-justification/

Javascript – React + TypeScript: ‘React’ refers to a UMD global but the current file is a module. Consider adding an impor