[리액트 네이티브를 다루는 기술 #26] 12장 리액트 네이티브 프로젝트에서 타입스크립트 사용하기 (p .683 ~ 732)

@ List

* 12.1 타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기

* 12.2 타입스크립트 빠르게 배우기

** 12.2.1 기본 타입

** 12.2.2 함수 타입

** 12.2.3 interace

** 12.2.4 배열 타입

** 12.2.5 Type Alias

** 12.2.6 Generic

** 12.6.7 더 알아보기

* 12.3 타입스크립트로 컴포넌트 작성하기

** 12.3.1 Props 사용하기

** 12.3.2 useState 사용하기

** 12.3.3 useRef 사용하기

** 12.3.4 useReducer 사용하기

* 12.4 타입스크립트로 Context API 사용하기

* 12.5 타입스크립트로 react-navigations 사용하기

** 12.5.1 라이브러리 설치하기

** 12.5.2 네이티브 스택 내비게이션 사용하기

** 12.5.3 내비게이션 감싸기

* 12.6 서드 파티 라이브러리의 타입

* 12.7 정리

 

@ Note

1. 변수 타입 결정 시점

 - JAVA, Kotlin, Go, Swift 등의 언어에서는 정적타입 언어로, 변수의 타입이 컴파일 타임 때 결정됨

 - Javascript 는 동적 타입 언어로 변수의 타입이 런타임에 결정됨. 즉, 코드가 실행되는 단계에서 타입이 결정됨

  > 동적 타입 언어는 배우기 쉽고 빠르게 개발할 수 있지만, 프로젝트의 규모가 커질수록 실수할 가능성도 높아지고 타입 추론이 일부만 됨

  > TypeScript를 사용하여 Javascript에 정적 타입 시스템을 적용하고, react native에서 활용 가능함

 

2. TypeScript 설치 및 템플릿 구성

npx react-native init LearnTypeScript --templete react-native-template-typescript

 * 에러 발생 시 : https://bocoder.tistory.com/92?category=904878 

 - tsconfig.json : 타입스크립트 환경 설정을 위한 파일

 - TypeScript 코드의 확장자는 ts 또는 tsx

  > 리액트 컴포넌트를 작성한다면 tsx로 해야 JSX 가 지원되고, JSX를 사용하지 않는다면 확장자를 ts로 저장

 

3. 기본 타입

 - 타입을 지정할 때는 변수이름 뒤에 [ : 타입 ] 형태로 지정

 - 아래 코드에서 ESLint 오류가 발생하는데, 선언된 변수를 사용하는 곳이 없으면 에러를 발생하는 규칙이 있음

- .eslintrc.js 파일을 열어서 아래와 같이 수정하여 설정 가능

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {
    '@typescript-eslint/no-unused-vars': 0,  // 0: 사용안함, 1: 경고표시, 2: 오류표시 
  },
};

 

4. 기타

 - 타입 선언 시 ' | ' 문자는 Union Type 으로, string | null 이라고 되어있으면 string 또는 null 이라는 것을 의미함

 - any 타입의 경우 모든 타입의 값을 대입할 수 있음

 - 기본 타입들은 타입을 명시해주지 않아도 자동으로 추론함

 - interface : TypeScript에서 객체나 클래스를 위한 타입을 정할 때 사용

  > 객체의 타입은 interface 로도 선언할 수 있고, type 으로도 선언할 수 있음. 취향에 따라 사용하되 일관성 있게 사용 필요.

 - Type Alias : 타입에 별칭을 붙여주는 기능 

 - Generic : 함수, 객체, 클래스 타입에서 사전에 정하지 않은 다양한 타입을 다룰 때 사용

 * reference : https://typescript-kr.github.io/

 

등등..