[React-Native] Expo 기반 프로젝트 생성하기

※ 이 포스팅은 리액트 네이티브와 npm 등 설치, 환경설정을 모두 완료했다고 가정하고 작성됐다

※ 이 포스팅은 윈도우에서 테스트 후 작성됐다. 그러나 맥이라고 별다를 것 없다

 

리액트 네이티브 프로젝트를 만드는 법은 리액트 네이티브 CLI 방식 외에도 Expo CLI 방식도 있다.

개인적으로 프로젝트를 만들 땐 리액트 네이티브 CLI 방식을 더 선호하지만 간단한 앱이라면 Expo로 만드는 것도 나쁘지 않아 보여서 사용한 후 방법을 정리한다.

Expo CLI로 프로젝트를 만드는 법은 공식문서에 잘 나와 있어서 그대로 따라하기만 하면 된다.

Expo CLI를 설치하려면 아래 명령어를 터미널에 입력한다.

 

yarn add expo

 

사용할 수 있는 Expo CLI들을 확인하려면 터미널에 아래 명령어를 입력한다.

 

npx expo -h

 

그럼 터미널에 아래 내용들이 표시된다.

 

 

Expo Prebuild(이하 프리빌드)를 사용하지 않는 베어 프로젝트라면 커스텀 Expo 번들링이 작동하게 추가 설정을 해야 한다.

 

npx expo prebuild

 

프리빌드는 리액트 네이티브 프로젝트의 네이티브 코드를 만드는 Expo의 시스템이다. 아래 4개 요소 기반으로 해당 프로젝트의 네이티브 코드를 만든다.

 

• config 파일(app.json / app.config.js)
• npx expo prebuild 명령어와 같이 전달된 매개변수
• 프로젝트의 Expo 버전, 프리빌드 템플릿
• package.json의 네이티브 모듈을 연결하기 위한 자동 연결(Autolinking)

 

위의 npx expo prebuild를 실행하면 리액트 코드를 실행하기 위한 안드로이드, iOS 폴더가 생성된다.

생성된 폴더를 수동으로 수정하면 추후 npx expo prebuild --clean 명령어 실행 시 변경사항이 사라질 위험이 있으니 참고한다.

프리빌드 시스템은 공식문서에서 적극 권장하지만 선택 사항이기 때문에 안 써도 되고, 쓰더라도 언제든 사용을 중단할 수 있다. 아직 공부 단계인 내 입장에선 있다는 것 정도만 알고 넘어가도 되는 기능이라고 생각된다.

 

지금 설치된 Expo 버전이 유효한지 확인하려면 --check, --fix 명령어를 사용할 수 있다.

 

npx expo install --check

 

--check는 설치된 패키지 중 업데이트가 필요한 패키지를 확인하는 옵션이다. --fix는 잘못된 패키지 버전을 찾으면 자동으로 업데이트해준다. 마지막으로 수정하고 시간이 오래 지난 프로젝트에 사용하면 좋을 것 같다.

 

이제 Expo로 새 리액트 네이티브 프로젝트를 만들어 본다. 터미널에서 아래 명령어를 실행하면 된다.

 

npx create-expo-app@latest 프로젝트명

 

만약 TodoReactNative란 이름의 프로젝트를 만들고 싶다면 npx create-expo-app@latest TodoReactNative라고 치면 된다.

그럼 로딩이 걸린 후 TodoReactNative란 이름의 폴더가 만들어지며 뭔가 진행되는 게 보인다.

 

 

좀 기다리면 터미널에 아래와 같이 표시될 것이다.

 

 

생성된 폴더로 이동해서 npm run android 명령어를 실행하면 에뮬레이터가 나타나면서 앱이 실행된다. 맥북이라면 무슨 명령어든 실행할 수 있다.