리액트 네이티브 타입스크립트 시작하기 [React-Native, TypeScript]

 < 내용 > 

• 리액트 네이티브 타입스크립트로 앱을 만들 수 있다.
• 리액트 네이티브에서도 prettier를 사용할 수 있다.

 < 목차 > 

1. npx create-expo-app --template
2. Node.js, Prettier 설치 및 파일 만들기 
3. tsconfig.json
4. package.json

---

 1. NPX CREATE-EXPO-APP --TEMPLATE 

https://reactnative.dev/docs/typescript

Using TypeScript · React Native

• 위 링크를 참조한다.

npx create-expo-app --template

• 명령어를 입력하면 4개의 메뉴가 나온다.
• 나는 TypeScript를 사용할 것이며 app에 아무것도 설치가 안되어 있는 상태를 선호하므로 Blank를 선택한다.

• 선택 후엔 이름을 적는데 practice-react-native 줄여서 practice-rn

• enter를 누르면 설치 완료

 

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

 

---

 2. Node.js, Prettier 설치 및 파일 만들기 

https://sound-programming.tistory.com/186

리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier]

• 위 링크를 참조한다.

---

 3. tsconfig.json 

• baseUrl을 무조건 src로 하는 것은 아니다.
• Nevigation (TypeScript)를 선택하면 아래와 같은 구조로 폴더가 생성된다.
• 따라서 기본 리액트의 경우 src 폴더가 있고 react-native blank는 src를 만들거나 원하는 폴더를 만들어서 경로를 설정하면 되지만 Nevigation(TypeScript)는 app, components, constants 폴더를 다 설정해줘야 하는데 불가능하다.
• 따라서 baseUrl을 "."으로 설정한다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".", // 현재 디렉토리를 기준으로 설정
    "paths": {
      "@app/*": ["app/*"], // app 디렉토리
      "@assets/*": ["assets/*"], // assets 디렉토리
      "@components/*": ["components/*"], // components 디렉토리
      "@constants/*": ["constants/*"] // constants 디렉토리
    }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

---

 4. package.json 

• package.json도 아래와 같이 설정한다.

"scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "format": "prettier --check 'app/**/*.{js,jsx,ts,tsx}' 'components/**/*.{js,jsx,ts,tsx}' 'constants/**/*.{js,jsx,ts,tsx}'",
    "format:fix": "prettier --write 'app/**/*.{js,jsx,ts,tsx}' 'components/**/*.{js,jsx,ts,tsx}' 'constants/**/*.{js,jsx,ts,tsx}'"
  }