기존 React 프로젝트에 TypeScript 적용하기

서론

기존 리액트 프로젝트에서 토이프로젝트를 리팩토링하면서 타입스크립트를 적용해야하는 일이 생겼다.

이번 게시물에서는 타입프로젝트에 관련된 내용과, 타입스크립트를 적용하는 방법을 알아보려고 한다.

(타입스크립트 공부를 위해 포스팅을 한 게시물이니, 코드가 필요하신 사용자들은 적용하기 파트부터 봐주시기 바랍니다)

---

타입스크립트란?

마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.

프로젝트에서 프론트엔드 분야에서 널리 흔하게 사용되고 있으며, 필연적으로 사용되는 기술이 되어버렸다.

 

컴파일 언어이면서 동시에 정적 타입의 언어이다.

자바스크립트의 경우 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반대로 타입스크립트는 정적 타입의 컴파일 언어이며, 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환이 되어진다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있으며 미리 타입을 결정해놓기 때문에 실행 속도가 매우 빠르다는 장점을 가지고 있다. 하지만 코드 작성 시 매번 타입을 결정해줘야하기 떄문에 번거로우며 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

 

자바스크립트 슈퍼셋(Superset)

타입스크립트는 자바스크립트의 슈퍼셋의 형태이다. 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어로써 부모는 `자바스크립트` 자식은 `타입스크립트`로써 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일하고 변환할 수 있다.

 

객체 지향 프로그래밍 지원한다.

타입스크립트는 ECMAScript(에크마 스크립트라고 읽는다)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

그렇다면 왜, 타입스크립트를 사용해야할까?

높은 수준의 코드 탐색과 디버깅이 가능하다.

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거할 수 있다.

그리고 코드 자동완성이나, 실행 전 피드백을 개발자에게 제공함으로써 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

 

자바스크립트와의 완벽 호환을 할 수 있다.

타입스크립트는 자바스크립트를 부모 슈퍼셋으로 가지고 있기 때문에 100% 호환이 된다. 따라서 프론트엔드 및 백엔드 어디든 자바스크립트로 사용할 수 있는 곳이라면 타입스크립도 쓸 수 있다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발한다.

 

강력한 생태계 그리고 커뮤니티를 가지고 있다.

타입스크립트는 오래 되지 않는 언어임에도 불구하고, 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하고 있으며 웹에 최적화된 IDE인 VScode 또한 타입스크립트로 구성되어져 있으며, 이에 따른 기능과 확장 플러그인을 제공한다.

---

타입스크립트 적용해보기

내가 사용을 하고 있는 React는 타입스크립트와의 높은 호환성을 가지고 있어, 리액트와 타입스크립트의 조합을 사용할 수 있다.

이미 리액트로 만들어진 프로젝트에 타입스크립트를 적용할 수는 있지만, 처음 셋팅을 하고 진행을 하는 것과 다르게 조금 난이도가 있는 편이다. 개인적으로 이미 만들어진 리액트 프로젝트에 타입스크립트를 적용하면서 개고생을 했기 때문에 이렇게 포스팅으로 남겨놓는다 👻

새로운 프로젝트를 만들고, 타입스크립트 적용을 하고 싶다면?

리액트 생성을 하면서 동시에 타입스크립트를 적용하고 싶다면 아래 코드를 입력하면 된다.

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

기존 프로젝트에 타입스크립트를 적용하고 싶다면?

기존 리액트 프로젝트에 타입을 인식시키기 위해서 @types와 같은 타입스크립트 관련 라이브러리를 설치를 해줘야한다. 아래와 같이 기본적인 리액트 관련 @types 라이브러리를 설치해줘야 우리가 타입스크립트를 리액트에 적용시킬 수 있다. 이름모를 라이브러리를 사용하고 있었다면 관련 @types 라이브러리가 존재하지 않을 수 있으니 확인을 해보는 것이 좋다.

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

npm 또는 yarn 패키지로 타입스크립트를 설치했다면, tsconfig.json 파일에 타입스크립트 관련 설정을 해줘야한다. 만약 프로젝트에 tsconfig.json 파일이 존재하지 않는다면, 아래 명령어를 통해 tsconfig.json의 default 설정이 담긴 파일을 생성할 수 있다.

tsconfig.json 프로젝트에 설치하기

npx tsc --init

기본 default 설정이 되어진 tsconfig.json 생겼다면, 여기서 컴파일 옵션을 살짝 수정을 해줘야한다. 타입스크립트 최신 버전을 사용하고 있다면 여러 주석 처리때문에 어지럽기 때문에 아래 코드를 Ctrl + V 해서 붙여넣기 하는 것을 추천한다.

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"
  ]
}

세팅이 완료된 후 index.js와 같은 기타 기본 파일을 ts로 변환하는 과정에서 React 18 사용자의 경우 에러를 마주할 수도 있다. 장정 1~2일 동안 구글링을 통해 발견할 수 있었던 사이트를 함께 첨부를 하려고 한다. 만약 에러가 뜬다면 아래 페이지에서 해당 파일을 찾고, 그에 따른 해답을 찾을 수 있을 것이다. 

Browse Phuoc Le / react-typescript-guide - PRODYNA Bitbucket

---

정리

프로젝트 생성 시에 타입스크립트 설치와는 달리 기존 프로젝트에 적용하는 단계는 총 세 단계로 이루어진다.

(1) React에 타입스크립트 적용을 위한 @types 라이브러리 설치

(2) tsconfig.json 파일을 프로젝트 폴더에 주입

(3) tsconfig.json 파일의 컴파일 옵션을 수정

 

기존 리액트를 타입스크립트로 리팩토링한 소스코드는 레포지토리에서 확인 가능하다.

GitHub - TOY-17/000: 000 프로젝트 : 투두리스트

---

참고 자료

https://www.samsungsds.com/kr/insights/typescript.html

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript]

https://any-ting.tistory.com/93

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

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28597

[@types/styled-components] How do you use `attrs`? · Issue #28597 · DefinitelyTyped/DefinitelyTyped

https://gentlesark.tistory.com/148

React 개발시 index.tsx에서 Error 발생 해결(TypeScript사용)