[React]React + TypeScript 시작하기

https://bk0625.tistory.com/2

[React]리액트란?

https://bk0625.tistory.com/18

[TypeScript] 타입스크립트란?

 

 

리액트는 페이스북에서 개발한 유저 인터페이스 라이브러리이다.

 

개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해주는데 페이스북, 인스타,넷플릭스 등 많은 큰 서비스에서도 많이 쓰이고 우리 나라에서도 많은 기업들이 사용하고 있다.

 

보통 리액트를 처음 시작하면 자바스크립트로 리액트를 개발하지만 리액트는 타입스크립트로도 개발할 수 있다.(당연한건가) 세팅법을 알아보자.

 

적당한 폴더에 VSCode를 열고

 

 

해당 명령어를 터미널에 입력한다.

 

 

그럼 손 쉽게 타입스크립트를 적용할 리액트 프로젝트가 생성이 된다.

 

짠!

 

이렇게 만들어진 프로젝트에서 타입스크립트를 이용하여 프로젝트를 작성할 수 있다. 결국엔 .ts , .tsx 파일들은 트랜스 파일되어 JavaScript 파일로 만들어지게 된다.

 

만약 기존 CRA 리액트가 존재할 때 타입스크립트만 추가하려고 하면

 

 

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

 

 

둘 중 하나를 입력해주면 된다. 그리고 tsc --init 명령어를 실행해서 tsconfig.json 파일을 생성한다. 그리고

 

{

  "compilerOptions": {

    "target": "es6", //js 버전 정의

    "lib": [ 

      "dom", 

      "dom.iterable",

      "esnext"

    ],

    "baseUrl": "./src", // ./src를 절대 경로로 지정

    "allowJs": true, //ts안에서 js허용(js파일 import가능)

    "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의 모든파일 확인하게 됨

    "src"

  ],

  "exclude": [

    "node_modules"  

  ],

}

 

이렇게 세팅을 해주어야 타입스크립트에서 자바스크립트로 컴파일이 가능해진다. 그 후 기존 파일들(.jsx나 .js 파일들)의 확장자를 .tsx.로 변경해주면 된다. 

 

 

이렇게 타입스크립트를 적용해서 리액트를 개발하게 되면 그냥 자바스크립트를 쓸 때랑은 아주 살짝 사용법이 달라지게 된다.(타입을 제대로 명시해주지 않으면 에러가 난다.) 그렇다고 타입을 전부 any로 도배해버리면 타입스크립트를 쓰는 의미가 없으니... 다음 포스팅부터는 타입스크립트를 이용한 간단한 리액트 예재를 다뤄보려고 한다.

 

 

 

 

공부하면서 정리한 내용이니 모든 지적 감사히 받겠습니다:)