[React] CRA (Create-react-app) 에 typescript 적용하기

안녕하세요. 엄티입니다.

지난 포스팅에서는 eslint, prettier를 사용하여 기본적인 JS 문법과 협업 시 코딩 스타일을 맞추는 법에 대하여 포스팅해보았습니다.

이번에는 요즘 대세(?) 대세가 된지는 많이 지났지만 JS의 부족함 점을 여과 없이 채워주고 있는 TypeScript를 적용하는 법에 대하여 포스팅해보겠습니다.

CRA (Create-react-app)에 eslint, prettier 적용하기

[React] CRA (Create-react-app) 에 eslint, prettier 적용하기

TypeScript는 동적이고 자유분방한 언어인 JavaScript를 정적으로 만들어 주어 개발자로 하여금 버그를 최소화할 수 있고 특히 리액트를 사용할 때에 Props에 타입, State에 타입들을 적용시켜서 협업하는 사람으로 하여금 조금 더 쉽게 같이 개발할 수 있게 만들어 줍니다.

저도 실제로 사용해 봤는데 처음에는 조금 힘들지만 몇몇 코드를 리팩터링 해갈 때에 엄청난 효과를 보여주어 매번 프로젝트할 때마다 사용하기로 마음을 먹고 이번에 사용해 보도록 하겠습니다.

먼저 CRA로 만든 프로젝트가 있다면 다음과 같이 install로 끝납니다.

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

하지만 리액트에선 CRA로 프로젝트를 만들 때에 바로 타입 스크립트를 적용할 수 있는 방법을 알려줍니다.

처음부터 프로젝트를 만들 때 타입 스크립트를 도입할 마음이 있다면 다음과 같이 만들어 주면 더 좋겠습니다.

$ yarn create-react-app my-app --typescript

 

필요한 파일만 만들고 나머지는 제거해주었습니다.

저는 몇 가지 에러가 막 발생해서 고생을 조금 했었는데 eslint를 조금 수정해주면서 해결되었습니다.

발생하였던 문제는 import 관련 문제였는데 import 시 확장자를 써주지 않아서 문제 가 생겼었습니다. 그러고 확장자를 빼자 기존에 있던 setting에서 에러가 발생하였고 뫼비우스에 띠처럼 에러가 발생하였죠. 그래서 결국 두 가지를 다 써줌으로써 이를 해결했습니다.

그 외의 타입 스크립트 관련 모듈을 몇 가지 더 설치해주어야 합니다.

$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

저의 eslint plugins, parser 부분을 확인해 주시면 되겠네요.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier",
        "@typescript-eslint"
    ],
    "settings": {
        "import/resolver": {
            "node": {
              "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "rules": {
        "prettier/prettier": ["error"],
        "react/jsx-filename-extension": [1, {
            "extensions": ["jsx", "tsx"]
        }],
        "import/extensions": ["error", "ignorePackages", {
            "js": "never",
            "jsx": "never",
            "ts": "never",
            "tsx": "never"
        }]
    }
}

 

 그다음 타입스크립트 테스트를 한번 해보겠습니다.

 App.tsx

import React from 'react';
import './App.css';

interface IProps {
  test: string;
}

const App: React.FunctionComponent<IProps> = ({ test }) => {
  return <div className="App" />;
};

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

 이렇게 App에서 props의 타입을 정해놓고 index.tsx 에 다음과 같이 정의해 두면 에러가 나오는 것을 알 수 있습니다. 정적인 타입을 정해 주었는데 왜 안 넣어주었냐는 에러이죠.

마지막으로 정리를 한번 해보겠습니다

- $ yarn add typescript @types/node @types/react @types/react-dom @types/jest (이미 CRA를 한 경우)
- $ yarn create-react-app my-app --typescript (CRA를 타입 스크립트와 같이 할 경우)

- js 파일을 -> tsx 파일로 변경
- $ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser (eslint에 필요한 파일 설정)
- eslintrc.json 변경 (plugins, parser)

 

타입 스크립트 강추합니다!