이미 만든 React에 Typescript 적용하기

처음부터 TypeScript로 react를 시작하면 간단하게 밑과 같이 npx로 진행하면 된다.

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

or

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

 

하지만 만약 이미 만들어 놓은 react에 중간 갑자기 typescript를 적용하고 싶은 경우 다음과 같이 진행하면 된다.

 

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

or

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

 

그 다음 기존에 있던 파일 이름을 Typescript file로 이름 변경을 하면 된다 (e.g src/index.js => src/index.tsx) 그 다음 development server를 재시작하면 된다고 한다. 

하지만 경우에 따라 파일에 에러가 발생하기도 한다. 나의 경우 그러했다. 

 

내가 직면한 문제점: 

 

1. index.tsx/app.tsx에서 발생한 오류: 

알 수 없는 이유로 두 컴포넌트에서 계속 빨간 줄이 나왔다. 해당 에러를 클릭해보면 밑과 같은 문구를 출력했다. 

 

'React' refers to a UMD global, but the current file is a module

'React' refers to a UMD global, but the current file is a module

 

위 링크를 참고한 결과 

TypeScript에서 위와 같은 Error을 해결하기 위해선 import React from 'react'을 통해 해결할 수 있다고 나온다. 하지만 위와 같이 매 파일마다 import React from "react:" 하는 것 대신 typescript를 이용한다면, 필수적으로 있어야 할 tsconfig.json 파일에  jsxcompilerOption of react-jsx or react-jsxdev가 있어야 한다고 말한다. 

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

이것을 추가하면 웬만한 에러는 해결할 수 있을 것이다. 

 

 

2. styled-component를 사용해서 발생한 에러:

나의 경우 styled component를 사용해 개발을 하는 중인데, import styled-component에 알 수 없는 에러가 발생했다.  

 

검색 결과, npm i -D @types/styled-components 을 추가적으로 install해야 typescript 환경에서도 정상적으로 styled-component를 적용할 수 있다. 

 

 추가로, styled-component를 사용시 props를 전달할 때 타입을 지정하거나, 다수의 props를 작성할 때는 interface를 사용하는 등, 여러가지 추가적인 요구조건이 필요해지게 된다(당연히 타입스크립트 환경이니 그에 맞게  변경을 해주어야 한다....)

 

해당 내용은 이번 글에선 다루지 않을 예정....ㅠ(사실 저도 잘은 모름) 보다 구체적인 내용을 확인하고 싶다면 해당 링크로 가서 확인하시길...!