[React.ts] React를 Typescript로 시작해보기 - 개발 환경 구성

안녕하세요. Typescript로 시작하는 첫 글입니다. 

Typescript의 첫 시작을 React 프로젝트로 시작하게 되었습니다. 그 이유는 제가 이번에 메인 홈페이지를 다시 리뉴얼 하게 되면서 지난 2년 동안 사용하지 않았던 React를 다시 시작하게 되었는데요. 비록 만드는 잠깐 동안이었지만 배움과 같이 더불어 진행하게 되었기 때문에 React의 변경점도 같이 살펴봄과 더불어서 이번에는 Typescript를 사용하여 개발하게 되었습니다.

 

Create react app

React를 빠르게 시작할 수 있는 방법으로 create-react-app을 사용하는 방법이 있습니다. Typescript를 사용하는 것도 역시 이 명령어로 쉽고 한 번에 구성할 수 있습니다.

$ create-react-app [app-name] --template typescript

일반적으로 create-react-app을 수행하게 되면 Javascript를 Base로 생성이 되기 때문에 --typescript 옵션을 추가하여 Typescript로 바꿔주면 됩니다.

Javascript랑 어떤 부분이 다른지 간단히 살펴보도록 하죠.

 

Typescript React

React를 Typescript로 사용하게 되면 기본적으로 Typescript 문법을 사용하게 됩니다. 또, Javascript의 기본 React 디렉터리 구조에서 Typescript configuration 파일이 한 개 더 추가되어 구성되고, package.json에는 Typescript로 정의된 패키지는 @types라는 이름을 가지고 패키지를 설치하게 됩니다. 

.
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock

Typescript 환경에서 존재하는 tsconfig.json은 Typescript 언어의 환경 설정 파일입니다. Typescript의 빌드 환경을 다양하게 설정할 수 있습니다.

{
  "name": "practice-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.21",
    "@types/node": "12.12.5",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
    "typescript": "3.6.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json을 살펴보면, 눈에 띄는 것이 바로 @types로 시작하는 패키지입니다. 이 패키지는 Typescript 언어에서 해당 패키지를 사용하기 위한 확장 패키지입니다.

Javascript로 개발된 패키지는 Typescript에서도 사용할 수는 있지만 Typescript로 declare 되어 있어야 합니다. 하지만 기존의 패키지들은 Javascript로 export 되어 있기 때문에 Typescript에서 사용하려면 반드시 Typescript에서 declare 해줘야 사용이 가능합니다. 이를 정의한 것이 바로 @types/[package-name] 입니다.

주의해야 할 점은 그러한 패키지가 있고, 그렇지 않은 패키지가 있습니다. 이를 테면 jest, react 등의 기본 패키지는 별도로 구성이 되어 있지만 MobX 패키지의 경우, 기존 Javascript 패키지에서 그대로 Typescript에서도 declare되어 있기 때문에 MobX의 경우, 별도의 @types 패키지를 설치해야 할 필요가 없습니다.

만약 Typescript로 declare되지 않은 패키지를 Typescript에서 사용할 경우, 아래의 오류가 나타납니다.