[React-Native] 기본 셋팅

포텐데이 오챌완 프로젝트를 하고 나서 기존에 웹으로 만들었던 프로젝트는 React-Native를 사용해 앱으로 만들어보기로 했다

오랜만에 React-Native하는 김에 기본 셋팅을 정리해보고자 한다

 

---

 

1. 설치

설치는 React-Native 공홈에 있는대로 설치하면 되기 때문에 어려운 것은 없다

 

https://reactnative.dev/docs/environment-setup?guide=native

Setting up the development environment · React Native

 

mac의 경우에는 watchman 설치하는 거 잊지말기!

 

2. 기존 프로젝트 타입스크립트로 바꾸기

 

프로젝트를 생성하고 나니까 타입스크립트를 적용 안 했다는 것이 생각났다...

살펴보니 처음부터 아래의 명령어를 사용하면 타입스크립트를 사용할 수 있게끔 프로젝트를 생성할 수 있다

 

npx create-expo-app --template

 

하지만 난 이미 만들어버렸고 이런 경우에는 아래와 같이 하면 된다

 

1) 기존 프로젝트에 타입스크립트, types, ESLint 플러그인 추가하기

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

 

2) 프로젝트의 루트 디렉토리에 tsconfig.json을 만들고 아래와 같이 작성해주기

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

 

3) 기존의 자바스크립트 확장자 파일을 *.tsx로 변경하기

 

위와 같이 하면 기본 프로젝트 생성은 끝났다

 

+

TailwindCSS에 너무 익숙해진 나머지 React-Native에서도 사용하고 싶었다

찾아보니까 여러 라이브러리들이 나왔는데 나는 twrnc를 사용했다

원래는 다른 라이브러리를 사용하려고 했는데 twrnc는 버전을 꾸준히 업데이트 해서 선택하게 되었다