[React TypeScript] React 프로젝트 TypeScript 적용

-개요

안녕하세요. 이번 시간에는 React 프로젝트에 TypeScript 적용 방법에 대해 알아보겠습니다.

 

프론트 앤드 개발 시 협업에 있어 기업에는 "Hot!" 하게 TypeScript를 적용해 사용하는 것 같아요.

 

실제 사용하면서 JavaScript를 사용할 때 보다 지켜야 할 규칙들이 많이 생겨 불편하기도 하고 귀찮기도 했지만, 실제 여러 사람들과  협업을 진행할 때 직관적이고 규칙이 장점도 많다는 걸 느꼈습니다.

 

- 설정

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

    처음 React 프로젝트를 생성할 때 TypeScript를 적용해서 프로젝트를 생성할 수 있습니다.

명령어

npx create-react-app 프로젝트이름 --template typescript

위 명령어를 통해 React 프로젝트를 생성하면 기본적으로 TypeScript가 적용된 프로젝트가 생성됩니다.

 

 

2. 기존 프로젝트에 TypeScript 적용하기

    기존 프로젝트에서 TypeScript로 전향하려고 하면 의존성 문제로 많은 에러가 발생합니다. (꼭! 참고하세요ㅠㅠ!)

    그렇기 때문에 아주 기본적인 개념을 정리하겠습니다.

 

기본적으로 리액트에서 TypeScript를 사용하기 위해서는 아래 패키지가 필요합니다.

명령어

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

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

 설치하려는 모듈을 간단하게 설명하면 typescript @types/node @types/react @types/react-dom @types/jest

 

typescript 모듈은 말 그대로 typescript를 사용하겠다라고 알 수 있습니다. 하지만 @types/node와 같이 @types/ 가 붙은 모듈은

타입 스크립트가 지원되는 라이브러리입니다.

 

기본적으로 내가 사용하고자 하는 모듈에 @type모듈이 설치가 되어있다면 그냥 사용해도 되지만 그렇지 않다면 우리는 위와 같이 모듈을 설치해 사용해야 합니다.

 

간혹 내가 사용하고자 하는 모듈이 typescript를 지원하지 않는 경우가 있습니다.(꼭!! 확인^)

 

* 환경설정 파일 변경

1. jsconfig.json 파일 -> tsconfig.json 파일명 및 내용 변경

2.. jsx &. js 확장자 파일 ->. tsx 파일로 확장자 변경

- tsconfig.json 기본 설정 내용

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "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"
  ]
}

위 환경 설정을 수정하지 않으면 build시 javascript로 컴파일되지 않는 문제점이 있습니다.

 

환경설정에 꼭 유의하세요!! 그리고 전향시 소스코드 백업!! 꼭하고 진행하세요... 진행중 안되서 날리나면... 그날 집에 못 갑니다ㅠㅠ.