[React Native] 리액트 네이티브 시작하기(환경 세팅)

RN 개발 환경 세팅

크게 두 가지 방법이 있다.

1. expo-cli
2. react-native-cli

 

expo-cli (formerly create-react-native-app)

• 장점과 단점

  비기너 친화적. 리액트 프로젝트를 해봤으면 알겠지만 CRA가 환경 셋팅을 얼마나 쉽게 해주는가… 그것의 RN버전인 셈인 듯하다. expo cli의 주요 특징 중 하나는 큐알코드를 생성해서 이를 통해 디바이스로 앱을 실행할 수 있게 해주는 것, 그리고 코드가 변경될 때마다 자동적으로 디바이스 앱에 반영된다는 것이다.

  반면 단점은 순수 자바스크립트 앱에서만 작용한다는 것이다. 어느 순간 스위프트나 오브젝트C, 자바, 코틀린 등을 사용해야 할 때가 오면 이 것을 걷어내야 한다. expo cli는 eject 커맨드를 제공하고 있다.

 

react-native-cli

• 장점

  expo cli의 단점이 곧 이 아이의 장점이다. 커스텀 네이티브 모듈이 필요하면 이 것을 쓰면 된다.

  자바스크립트 코드 관점에서 expo cli와 다른 점은, react native cli는 루트 컴포넌트에 AppRegistry.registerComponent를 요구한다는 것이다. 이 메서드를 통해서 선택적으로 RN 루트컴포넌트를 여러개 가질 수 있다고 한다. expo cli는 디폴트로 App.js를 루트 컴포넌트로 사용한다.

 

Expo로 RN앱 만들기

Expo 소개

• Expo는 같은 코드베이스로부로부터 네이티브 iOS, 안드로이드, 웹앱을 빨리 빌드, 배포, 반복할 수 있게 도와주는 툴이다.

• Expo로 프로젝트를 빌드하는 방법에는 두 가지 방법이 있다.

  1. Managed Workflow
  2. Bare Workflow

  둘 다 어차피 Expo가 빌드하도록 도와주는 것은 맞는데 어느 정도 권한을 Expo에게 맡기느냐의 차이인 듯? Bare 워크플로우를 선택하면 Expo가 해당 프로젝트에 대한 full control을 갖게 된다고 한다.

 

Expo 개발 환경 셋업

• Local Deveopment Tool : Expo CLI

  npm install -g expo-cli
  

• Mobile Client : Expo for iOS and Android

  • 디바이스에 설치 or iOS simulator 설치 or 안드로이드 에뮬레이터 설치. 나는 맥북이므로 iOS 시뮬레이터 설치

    1. iOS 시뮬레이터의 경우 앱스토어에서 Xcode 설치(매우 오래 걸림…)
    2. Xcode 설치 후 열어서 preferences -> Component 탭 -> simulator설치

  • 시뮬레이터 설치 완료됐다면 Expo Dev Tools로 프로젝트를 연 뒤 Run on iOS simulator을 클릭하면 시뮬레이터에 Expo Client가 설치되고, 앱을 시뮬레이터에서 열 수 있게 된다.

• Watchman

  • macOS 유저라면 워치맨을 깔아야 한다. 워치맨은 파일과 기록의 변화를 지켜보고 그것에 반응해서 액션한다.

    brew install watchman
    

     

   

앱 빌드

• 프로젝트 폴더를 생성하고자 하는 상위 폴더 내에서

  expo init RNtutorial
  cd RNtutorial
  npm start(or yarn start)
  

  중간에 워크플로우 설정하라는 거랑, app 이름 적으라는 거랑 yarn 사용 여부 묻는데 이건 프로젝트에 따라 설정하면 된다. 나는 managed workflow에서 template-blank 설정(미니멈 설정 템플릿) 하고 앱 이름은 그냥 RNtutorial로 그대로 했고 yarn 사용 설정을 했다.

  앱을 스타트하면 커다란 큐알 코드가 나타난다. 이 큐알 코드로 디바이스에서 앱을 실행시킬 수 있고, 시뮬레이터나 에뮬레이터를 사용하는 경우 로컬호스트 창이 하나 뜨는데 화면 왼쪽 메뉴에서 Run on iOS simulator(또는 안드로이드)을 클릭하면 된다.

  다만 나는 여기서 에러가 났는데…

  

구글링해서 macOS도 업데이트하고, 시뮬레이터 파일이랑 컨텐츠 다 삭제해보고, 컴퓨터 껐다 켜보고, 빼먹었던 건 없는지 도큐먼트도 다시 확인해보고 했는데 결국 저 에러 첫번째 문장의 ./expo/ios-simulator-app-cache/ 부분이 문제였던 것이다. rm -rf ~./expo/ios-simulator-app-cache 를 실행하고 다시 프로젝트 실행했더니 되었다…!

 

(+) 그리고 원래 코드가 변경되면 시뮬레이터에 자동 적용돼서 리로딩돼야 하는데, 안되어서 시뮬레이터 캐시 삭제해보고 yarn이랑 watchman 캐시 삭제했는데도 안되다가 메트로 번들러 캐시 삭제하니까 됐다. expo start한 상태에서 쉬프트+R 누르면 캐시 삭제되고 리빌딩한다.